输入文件类型的CSS样式

Posted 2023-01-28

我仅使用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/

答案

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

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

我认为Firefox 11现在已停止使用某些供应商前缀（此处为-moz-opacity）。

另一答案

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

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

当然，您需要为浏览器提供支持。

另一答案

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;