Organizational Research By

Surprising Reserch Topic

Experts Most Trusted 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
23 views



Related Hot Questions



Government Jobs Opening

" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
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:

CSS:

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

Demo:

// 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);
body{
  font-family: Arial;
}

#fileUpload{
  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;
}
 
Browse
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
val=val.substring(val.lastIndexOf('\\')+1);

$('#textbox').val(val);

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

HTML


    
    

jQuery


answered Sep 22, 2015 by vijayshukla80

...