如何访问文件上传按钮的属性? [英] How to access the properties of a file upload button?
问题描述
您可以告诉我如何将css属性分配给type = file的按钮,例如:
can you show me how to assign css properties to the button that is of type=file,say:
<input type="file" name="coolFile">
我知道在css中你需要这样做:
I know that in css you need to do this:
input[type=file]{
background:#ccf;
//and so on
}
按钮?
推荐答案
不幸的是,主流浏览器不允许设计师直接对文件输入字段进行样式化。您可以将此视为安全功能,因为如果文件输入字段以棘手的方式设置,用户可能会被诱骗上传文件。
Unfortunately, mainstream browsers do not allow designers to directly style file input fields. You can consider this a "security feature" because users could potentially be tricked into uploading files if the file input field is styled in a tricky way.
有一个解决方案涉及创建第二输入字段,并隐藏其后面的实际文件输入。以下内容已从 http://www.quirksmode.org/dom/inputfile.html取消a>:
There is a solution that involves creating a second input field, and hiding the actual file input behind it. The following was lifted from 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>
这篇关于如何访问文件上传按钮的属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!