CODEWITHSUNDEEP
css
Kheema Pandey
Kheema Pandey

Reputation: 10285

CSS styling on Input File type

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/

Upvotes: 4

Views: 27232

Answers (3)

Omkar A.
Omkar A.

Reputation: 21

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

Upvotes: 2

user1310420
user1310420

Reputation:

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.

Upvotes: 3

anuj_io
anuj_io

Reputation: 2173

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.

Upvotes: 4

Related Questions