CSS styling on Input File type

Question

I am styling an Input File type using only CSS, and it works on every browser expect 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>

You can see the code working here:

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

Please, *please* don't *ever* do *anything* like that. For one thing, you can't possibly assume that all browsers will do it like that. How will your code work with old browsers like IE8? How will it work with mobile browsers? How will it work with browsers you don't know about? — Chris Morgan, Apr 04 '12 at 05:54
possible duplicate of [Styling ](http://stackoverflow.com/questions/4532733/styling-input-type-file) — Chris Morgan, Apr 04 '12 at 06:02
I'd also avoid styling them at all. Also, you know the text field isn't populated with the filename (which it normally is), right? So why even have it in the image? — powerbuoy, Apr 04 '12 at 06:07
I am totally agree with Chris comments. I must think about the linux browser and consider the opera browser. I think the good and acceptable solution is I must use uniform.js jquery library to work in every browser. — Kheema Pandey, Apr 04 '12 at 06:18

score 4 · Accepted Answer · answered Apr 04 '12 at 06:02

4

Here is the solution, add this to your styles. :

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

I think Firefox 11 has stopped entertaining some of the vendor prefixes (-moz-opacity here) now.

answered Apr 04 '12 at 06:02

anuj_io

2,043
2
13
19

thanks buddy you are right..now its works on Firefox as well. – Kheema Pandey Apr 04 '12 at 06:13

score 3 · Answer 2 · answered Apr 10 '12 at 13:17

Optionally, you could simplify it with:

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

And the CSS being:

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

Of course, you would need to accomadate for browser support.

score 2 · Answer 3 · answered Jun 06 '20 at 04:29

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 styling on Input File type

3 Answers3