造型拖放只上傳html/css

我正在處理文件的拖放區域，到目前爲止我已經能夠對其進行設置，但是我希望。除了我需要以某種方式添加在該區域內顯示「拖放」的文本。我不確定如何完成這一點。造型拖放只上傳html/css

我曾嘗試加入content:'drag and drop';

而且我已經嘗試了背景圖片，但它不是可擴展的，而不是說我認爲這是正確的解決方案的東西。

我的HTML看起來像這樣

<input type="file" class="form-control" name="uploadCover" value="" />

和我的CSS看起來像這樣

input[type="file"]{ 
    padding-bottom: 4em; 
    padding-top: 2em; 
    width: 100%; 
    border: 1px dashed #000; 
} 

input[type="file"]:hover{ 
    border: 1px dashed #67a5c5; 
}

和現場看起來像這樣...忽略醜陋的黃色！

enter image description here

任何幫助或想法將是美好的！我真的想避免使用JavaScript。

來源

2013-12-03 zazvorniki

這是如何起點？它使用僞元素:after，以便您添加的內容遵循控件本身。

它是「中心對齊」（使用margin auto 50%）以避免重疊文件名文本，但您可能需要添加更多CSS以確保這不會發生在您的網頁上。

input[type="file"]:after { 
    content: "Drag and drop"; 
    display: block; 
    min-width: 20em; 
    margin: auto 50%; 
}

http://jsfiddle.net/jrG7v/

編輯：如指出，在Chrome這隻作品。 Firefox中沒有顯示文本，IE11（自從我上次使用IE10以來似乎已升級）仍顯示文本樣式輸入框。希望別人有更好的答案。

來源

2013-12-03 19:20:49 joews

這是完美的！非常感謝你。：之後再也沒有想到一些奇怪的理由！ :) – zazvorniki

適用於Chrome，但不適用於Firefox。不知道IE10 + –

是的，我甚至沒有想過檢查ff。 – zazvorniki

對於瀏覽器的兼容性，我會跟去：

<div> 
    <input type="file" class="form-control" name="uploadCover" value="" /> 
    <div class="drag">Drag and Drop</div> 
</div> 

div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}

小提琴： http://jsfiddle.net/jrG7v/3/

來源

2013-12-03 19:37:21 Tiago

這會移動我之後擁有的所有內容，但由於負邊距 – zazvorniki

http://jsfiddle.net/jrG7v/5/如果您將某個div放入內容可能不是，請查看。 U也可以使用clear：如果需要，可以在下一個元素中使用 – Tiago

是的。嘗試將該邊距更改爲margin-top：-50px;並清除是當你使用浮動..不利潤。 – zazvorniki

造型拖放只上傳html/css

回答

相關問題