什么CSS可以用来使HTML文件字段透明？ [英] What CSS can I use to make an HTML file field transparent?

问题描述

我想有一个与图片重叠的< input type ='file'> ，以便当用户点击它时，文件上传对话框

I want to have an <input type='file'> that overlaps on an image, so that when the user clicks on it, the file upload dialog opens, and the image uploads via AJAX.

因此，我希望CSS以这样一种方式设置字段的样式，即只有浏览按钮是可见的（没有相关的框）

So I want CSS to style the field in such a way that either only the browse button is visible (with no associated box), or even better, only a transparent button is visible with overlapping text like "change photo", nothing else.

需要处理：

• FF 3 +


• IE 7+（pref 6 +）


• Chrome 5 +


• Safari 3 +


• Opera 9 +

• FF 3+
• IE 7+ (pref 6+)
• Chrome 5+
• Safari 3+
• Opera 9+

推荐答案

文件输入不透明度测试=> http://www.jsfiddle.net/steweb / LVjFy / ..set它的不透明度为0，它是完全透明的但可以点击！

File input opacity test => http://www.jsfiddle.net/steweb/LVjFy/ ..set its opacity to 0 and it's fully transparent but clickable!

img和透明文件输入的另一个例子=> http://www.jsfiddle.net/steweb/LVjFy/2/

Another example with img and transparent file input => http://www.jsfiddle.net/steweb/LVjFy/2/

EDIT （模拟文件输入点击的+ js）： http：// www.jsfiddle.net/steweb/LVjFy/6/ ..无需设置不透明度（ EDIT2 需要测试，无法在FF上工作）

EDIT (+ js that simulates the file input click): http://www.jsfiddle.net/steweb/LVjFy/6/ ..don't need to set opacity (EDIT2 needs to be tested, isn't working on FF)

这篇关于什么CSS可以用来使HTML文件字段透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！