css - 输入文件类型的 CSS 样式

Question

我只使用 CSS 设置输入文件类型的样式，它适用于除 Firefox 11.0 之外的所有浏览器。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/

Answer 1

这是解决方案，将其添加到您的样式中。：

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

我认为 Firefox 11 现在已经停止接受一些供应商前缀（此处为 -moz-opacity）。

Answer 2

或者，您可以通过以下方式简化它：

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

CSS是：

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

当然，您需要适应浏览器支持。

Answer 3

HTML

<section id="uploadImage"><input type="file" name="fileToUpload"id="fileToUpload">
<label for="fileToUpload" id="uploadLable">Choose Image To Upload</label>               
</section>
<button class="btnR"type="submit" name="submit">Uplaod</button>

CSS

input[type="file"]{
opacity: 0;
display: none;
}
#uploadLable{
width: 100%;
background-color: rgb(245,245,245);
color: rgb(80,80,80);
padding: 20px;
font-size: 16px;
}
.btnR{ 
color: white;
background-color: cornflowerblue;
min-width: 100px;
padding: 15px;
transition: 0.5s; 
}
.btnR:hover{
transform: rotate(10deg);
}

香草 javascript

document.getElementById('fileToUpload').onchange=function() {fileName()};             
function fileName(){
var x=document.getElementById('fileToUpload').value; 
document.getElementById('uploadLable').innerHTML=x;
}