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
– Chris Morgan, Commented Apr 4, 2012 at 5:54
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
– powerbuoy, Commented Apr 4, 2012 at 6: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
– Kheema Pandey, Commented Apr 4, 2012 at 6:18

anuj_io · Accepted Answer · 2012-04-04 06:02:33Z

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 4, 2012 at 6:02

anuj_io

2,1732 gold badges13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kheema Pandey Over a year ago

thanks buddy you are right..now its works on Firefox as well.

user1310420 · Accepted Answer · 2012-04-10 13:17:43Z

3

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.

answered Apr 10, 2012 at 13:17

user1310420

Comments

Omkar A. · Accepted Answer · 2020-06-06 04:29:50Z

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

Collectives™ on Stack Overflow

CSS styling on Input File type

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related