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

12 Answers

0 votes

After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).

Click here to select a file

Then you can of course style the "file" div as you want.

And if you want to use a type="text" input instead of a div, simply change innerHTML for value:

Here is my original answer using jQuery:

Click here to select a file
answered Sep 22, 2015 by gauravg.gwl
0 votes

I have this rough example that you might want to get some idea...


Chose file


#file {


var wrapper = $('
').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this); $('#file').text($this.val()); }) $('#file').click(function(){; }).show();



answered Sep 22, 2015 by yashwantpinge
0 votes

I made a custom style for this as well. Check it out

JS Fiddle Demo - Custom Input type="file"



body {
input[type="file"] {
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;


$("#browse").click(function () {

$("#save").click(function () {
alert('Run a save function');

$("#clear").click(function () {

$('#test').change(function () {

Also add to external resources tab:

answered Sep 22, 2015 by virendra.bajaj
0 votes

In addition of Reigel,

here is more simpler implementation. You can use this solution on multiple file input fields, too. Hope this helps some people ;-)

HTML (single input)

HTML (multiple input)


// make all input fields with type 'file' invisible
  'visibility': 'hidden',
  'display': 'none'

// add a textbox after *each* file input
$(':file').after(' ');

// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {

// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
answered Sep 22, 2015 by jekbishnoi
0 votes

The fake div is not needed! No Js no extra html. Using only css is possible.

The best way is using the pseudo element :after or :before as an element overt the de input. Then style that pseudo element as you wish. I recomend you to do as a general style for all input files as follows:

input[type="file"]:before {
  content: 'Browse';
  background: #FFF;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #E0E0E0;
  top: -1px;
  line-height: 35px;
  color: #B6B6B6;
  padding-left: 5px;
  display: block;

--> DEMO

answered Sep 22, 2015 by rajnipancholi
0 votes

Here's an example that I'm using that utilizes jQuery, I've tested against Firefox 11, and Chrome 18, as well as IE9. So its pretty compatible with browsers in my book, though i only work with those three.


Here's a basic "Customizable" HTML structure.

    File to Upload


Here's a sample of my CSS

label.smallInput {
    background:url(images/bg_s_input.gif) no-repeat;


This is the heavy lifter.

/* File upload magic form?? */
    var id      = "__d_file_upload_"+i;
    var d_wrap  = $('
').attr('id',id).css({'position':'relative','cursor':'text'}); $(this).wrap(d_wrap).bind('change blur focus keyup click',function(){ $("#"+id+" input[type=text]").val($(this).val()); }).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput'); obj = $(this); $("#"+id).append($("").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();})); obj.closest('span').children('input.upload[type=button]').bind('click',function(e){ obj.trigger('click'); $(this).blur(); }); }); /* ************************ */


The HTML is pretty straight forward, just a simple element, i include the button so it can be named independently from the rest, sure this could be included in the JavaScript, but simply put, I'm a bit on the lazy side. The code searches for all inputs with a class of smallInput that have the type of file this allows you to define default HTML and fallback form structure in case a browser decides to be a pain.

This method only uses JavaScript to ensure delivery, it does not alter any browser behaviors in regards to the file input.

You can modify the HTML and JavaScript to make it very robust, this code suffices my current project so i doubt I'll be making any changes to it.


  • Different browsers treat the value of the file input differently, which in chrome results in c:\fakeroot\ on windows machines.
  • Uses anonymous functions, (for lack of a better word) which means if you have too many file inputs you can cause the browser to behave slowly on processing.
answered Sep 22, 2015 by atulpariharmca
0 votes

While Reigel's answer conveys the idea, it doesn't really have any style attached to it. I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.

I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.

Here's the JSFiddle link ->

$('input[type=file]').change(function(e) {
    $in = $(this);

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    else {
        alert("Please select a file to upload");
body {

div.upload {
    border: 1px solid #ddd;
    height: 30px;
    padding:3px 40px 3px 3px;
    width: auto;

div.upload:hover {

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    display: inline-block;
    height: 30px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;

.fileName {
    font-family: Arial;

.upload + .uploadButton {
" 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