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

2010-12-02 20:03:11 +08:00
 darasion
我想要的样式是这样的:
一个大约 宽100px 高30px 的方框按钮,点击这个按钮的任意一个位置,弹出选择文件对话框。
并且这个中只有文字而没有背景图片。



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

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



另:google chrome 9.0.597.0 dev 的<input type="file" />元素似乎有个bug. 就是点击【选择文件】按钮,再取消。对话框会连续出现两次。而点击【未选择文件】这个标签则不会跳两次。
5914 次点击
所在节点    问与答
6 条回复
Paranoid
2010-12-02 20:16:27 +08:00
est
2010-12-02 20:17:24 +08:00
F...F...Flash........
Paranoid
2010-12-02 20:19:41 +08:00
还有这个一个:
http://www.converthub.com/
darasion
2010-12-02 20:41:30 +08:00
囧。感觉都太费劲了。
disinfeqt
2010-12-02 21:26:28 +08:00
<input type="file" style="opacity: 0;" />
vini123
2018-01-03 15:51:49 +08:00
在 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);">
```

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/5310

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX