This topic created in 5630 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. 就是点击【选择文件】按钮，再取消。对话框会连续出现两次。而点击【未选择文件】这个标签则不会跳两次。
一个大约 宽100px 高30px 的方框按钮，点击这个按钮的任意一个位置，弹出选择文件对话框。
并且这个中只有文字而没有背景图片。
经过一番观察发现，
新浪微薄、腾讯微博的图片上传是直接用<input type="file" /> 设置样式实现的。
而网易微博则是使用一个flash。
照着新浪和腾讯的样式设置了一下，
发现自己做的在各个浏览器的表现不一样，经常是一个浏览器能用，换一个就点了没反应。
更发现自己做出来的还是很丑。不知道这个应该怎样设置才行呢？这个有没有窍门？
另：google chrome 9.0.597.0 dev 的<input type="file" />元素似乎有个bug. 就是点击【选择文件】按钮，再取消。对话框会连续出现两次。而点击【未选择文件】这个标签则不会跳两次。
 |
1
Paranoid Dec 2, 2010
|
 |
2
est Dec 2, 2010
F...F...Flash........
|
|
3
Paranoid Dec 2, 2010
还有这个一个:
http://www.converthub.com/ |
 |
4
darasion OP 囧。感觉都太费劲了。
|
 |
5
disinfeqt Dec 2, 2010
<input type="file" style="opacity: 0;" />
|
 |
6
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);"> ``` |
Select Language