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

vanila javascript

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

输入文件类型的CSS样式

3 个答案: