样式拖放仅上传html / css

Question

我正在处理文件的拖放字段，到目前为止，我已经能够按照我的意愿设置样式了。除了我需要以某种方式添加在区域内“拖放”的文本。我真的不确定如何做到这一点。

我尝试添加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;
}

并且该字段看起来像这样......忽略丑陋的黄色！

任何帮助或想法都会很精彩！我真的想避免使用javascript。

Answer 1

这个起点怎么样？它使用: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时似乎已经升级）仍然显示文本样式的输入框。希望其他人有更好的答案。

Answer 2

为了与浏览器兼容，我会选择：

<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/