Pre Exam Test Practice (SSC | Banking | IAS | GATE | State Level | CLAT | Railways | Insurance | Teaching Exams | NDA | Defence | IES |State Exam )

Organizational Research By

Surprising Reserch Topic

how to style input file with css3 javascript

how to style input file with css3 javascript Β using -''

I would like to style <input type="file" /> using CSS3.

Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.

Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?
Β Β Β Β 

asked Sep 22, 2015 by abhimca2006
0 votes

Related Hot Questions

Government Jobs Opening

" rel="nofollow" target="_blank">">
Select file..
answered Sep 22, 2015 by amit_cmps
0 votes

Ran into the same issue today, but it seems there's an easy way to have your own styles - hide the input, and style the associated label:


.upload input{
  display: none;

.upload label{
  background: DarkSlateBlue;
  color: white;
  padding: 5px 10px;

Works in latest Chrome, Firefox and IE 10. Didn't test others

answered Sep 22, 2015 by tejas lakhani
0 votes

Here is how to do it using HTML, CSS and Javascript (without any frameworks):

The idea is to have the button hidden and use a dummy

that you style as a file upload button. On click of this
, we call the hidden .


// comments inline

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = document.getElementById('fileUpload').value;
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);
  font-family: Arial;

  display: none; /* do not display the actual file upload button */

#customButton{  /* style the dummy upload button */
  background: yellow;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  color: red;
answered Sep 22, 2015 by ankitarajoria4
0 votes

Here is a solution with a text field where the user types in the (relative) pathname of the file copy on the server (if authorized) and a submit button to browse the local system for a file and send the form:

The scripting part hides the file input, clicks it if the user clicks on the submit button, submits the form if the user has picked up a file. If the user tries to upload a file without entering a filename, the focus is first moved to the text field for the filename.

Simply style the submit button for a perfect result:

.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
answered Sep 22, 2015 by rajeshujade
0 votes

When you retreive the value of an input field, browser will return a fake path (literally C:\fakepath[filename] in Chrome). So I would add the following to the Javascript solutions:

val=$('#file').val(); //File field value

val=val.replace('/','\\'); //Haven't tested it on Unix, but convert / to \ just in case


Ofc, it could be done in a single line.

answered Sep 22, 2015 by rajnipancholi
0 votes

This is my method if i got your point




answered Sep 22, 2015 by vijayshukla80