输入文件类型的CSS样式

我只使用CSS设置输入文件类型的样式，它适用于除Firefox11.0之外的所有浏览器。 CSS:

HTML:

您可以在此处看到工作的代码：

---

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

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

---

我认为Firefox 11现在已经停止使用一些厂商的前缀（-moz opacity）了。

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

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

当然，您需要考虑浏览器支持。

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>

瓦尼拉

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

---

求求你，求求你不要做那样的事。首先，你不可能假设所有浏览器都会这样做。您的代码将如何与IE8等旧浏览器配合使用？它将如何与移动浏览器配合使用？它将如何在你不知道的浏览器上工作？可能的重复。顺便说一下，有很多重复。很多很多。我也会避免设计它们的样式。另外，您知道文本字段没有填充文件名（通常是这样），对吗？那为什么还要把它放在图片上呢？我完全同意克里斯的评论。我必须考虑Linux浏览器并考虑Opera浏览器。我认为好的和可接受的解决方案是我必须使用uniform.js jquery库在每个浏览器中工作。谢谢，伙计，你说得对。现在它也可以在Firefox上工作。

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

<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>

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);
}

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