html - 样式拖放仅上传 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好像升级了)还是显示文字样式的输入框。希望其他人有更好的答案。