css - 如何访问文件上传按钮的属性？

Question

你能告诉我如何将 css 属性分配给 type=file 的按钮，比如：

<input type="file"  name="coolFile">

我知道在 CSS 中你需要这样做：

  input[type=file]{
     background:#ccf;
//and so on
}

如何为按钮分配值？

Answer 1

假设您想更改按钮的文本，这里有一个关于如何做到这一点的教程：

http://www.quirksmode.org/dom/inputfile.html

如果它只是简单的 CSS 属性，如颜色/边框/等，你已经有了答案，你只需要检查一些东西来找出它为什么不起作用。

Answer 2

不幸的是，主流浏览器不允许设计人员直接设置文件输入字段的样式。您可以将其视为“安全功能”，因为如果文件输入字段的样式以一种棘手的方式设置，用户可能会被诱骗上传文件。

有一个解决方案涉及创建第二个输入字段，并将实际的文件输入隐藏在它后面。以下内容来自http://www.quirksmode.org/dom/inputfile.html：

div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

<div class="fileinputs">
    <input type="file" class="file" />
    <div class="fakefile">
        <input />
        <img src="search.gif" />
    </div>
</div>

Answer 3

您使用DOM/JavaScript，例如：

document.getElementById("id").style.property="value"