<input type="file" /> 太丑了。怎样做它的样式？

This topic created in 5640 days ago, the information mentioned may be changed or developed.

我想要的样式是这样的：
一个大约宽100px 高30px 的方框按钮，点击这个按钮的任意一个位置，弹出选择文件对话框。
并且这个中只有文字而没有背景图片。

经过一番观察发现，
新浪微薄、腾讯微博的图片上传是直接用<input type="file" /> 设置样式实现的。
而网易微博则是使用一个flash。

照着新浪和腾讯的样式设置了一下，
发现自己做的在各个浏览器的表现不一样，经常是一个浏览器能用，换一个就点了没反应。
更发现自己做出来的还是很丑。不知道这个应该怎样设置才行呢？这个有没有窍门？

另：google chrome 9.0.597.0 dev 的<input type="file" />元素似乎有个bug. 就是点击【选择文件】按钮，再取消。对话框会连续出现两次。而点击【未选择文件】这个标签则不会跳两次。

type

input

file

6 replies • 2018-01-03 15:51:49 +08:00

Paranoid

Dec 2, 2010

各大厂商多操蛋呢...

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

est

Dec 2, 2010

F...F...Flash........

Paranoid

Dec 2, 2010

还有这个一个:
http://www.converthub.com/

darasion

Dec 2, 2010

囧。感觉都太费劲了。

disinfeqt

Dec 2, 2010

vini123

Jan 3, 2018

在 input 上边建立一个 label 标签，label 标签中定义一个 for 属性，for 属性的内容就是 input 的 id。当点击 label 标签的时候，就等于点击了 input。既然这样，只要 css 去实现 label，就 ok 了。
比如：
```
<label for="file" style="display:inline-block;width:100px; height:30px;line-height:30px;color:#fff; background-color:#666; border-radius: 5px;text-align:center;l">上传图片</label>
<input type="file" id="file" style="position:absolute;clip:rect(0 0 0 0);">
```