输入文件类型上的CSS样式

我只使用CSS样式化输入文件类型，并且它适用于所有浏览器都希望使用Firefox 11.0。 CSS：输入文件类型上的CSS样式

label{ 
background:url(http://www.itilexamapp.com/images/upload.png) no-repeat 0 0; 
padding:5px; 
display:inline-block; 
} 

input[type="file"] 
{-moz-opacity:0; 
-webkit-opacity:0; 
filter:alpha(opacity=0); 
padding:6px; 
width:200px; 
}

HTML：

<label> 
<input type="file" name="file_upload" /> 
</label>

你可以看到代码在这里工作：

~~http://jsfiddle.net/kheema/PeXq9/7/~~

来源

2012-04-04 Kheema Pandey

请*请*不要*做*任何*这样的事情。首先，你不可能假设所有浏览器都会这样做。您的代码如何与IE8等旧版浏览器配合使用？它将如何与移动浏览器协同工作？它如何与你不知道的浏览器一起工作？ – 2012-04-04 05:54:38

[Styling ]（http://stackoverflow.com/questions/4532733/styling-input-type-file） – 2012-04-04 06:02:01

顺便说一下，有* lot *重复。许许多多。 – 2012-04-04 06:02:17

这里是解决方案，它添加到您的样式。：

input[type="file"] {opacity: 0;}

我认为Firefox 11已经停止了一些供应商前缀（-moz-opacity here）的娱乐功能。

<div id='label'><input type='file' size='1' class='upload'></div>

而CSS之中：

来源

2012-04-04 06:02:33

感谢你的朋友你是对的..现在它的作品也在Firefox上。 – 2012-04-04 06:13:09

感谢您的帮助TEA_Totaler :) – 2012-04-04 06:22:59

或者，你可以用它简化

#label{ 
    width: 100px; 
    height: 50px; 
    background: #fff url('YOURUPLOADIMAGE.png') no-repeat; 
    } 
.upload{ 
    opacity: 0; 
    font-size: 45px; 
    }

当然，你需要为器。---浏览器的支持。

来源

2012-04-10 13:17:43

输入文件类型上的CSS样式

回答

相关问题