Adding Style to File Upload Button in CSS

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Adding style to file upload button in css

I tried this it looks pretty good to me. Are there any flaws with this?
Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.png) 100% 1px no-repeat;
    width:345px;
    height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

Here are the images
Sample Image

How do I style a File Upload button

You can try the below code

$('input[type="file"]').on('change', function() {  $('input[type="text"]').val($(this).val());});$('span').on('click', function() {  $('input[type="text"]').val($('input[type="file"]').val());});

form.uploadButton {  position: relative;  display: flex;}
input[type="text"] {  width: 200px;  height: 40px;  box-sizing: border-box;  border-radius: 2px;  border: 1px solid #ccc;  margin-right: 5px;}
span {  background: red;  border: 0;  color: #fff;  padding: 0 20px;  width: 80px;  text-align: center;  line-height: 40px;  cursor: pointer;}
input[type="file"] {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  opacity: 0;  cursor: pointer;  width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form class="uploadButton" method="" action="" enctype="multipart/form-data">  <input type="text">  <span>Browse</span>  <input type="file" name="file[]" multiple></form>

Is it possible to style Choose File input buttons?

You can have a look here
How to enable file upload on React's Material UI simple input?

There is also a package that's very handy and customizable for upload in react named dropzone

You can find good examples here https://react-dropzone.js.org/

Styling the input type file with CSS and a little JS, is this ok?

This functionality is not available in the browsers due to security reasons.

Checkout this explanation: https://stackoverflow.com/a/15201258/586051

Only Firefox browser allows it. Refer the following example in Firefox.

EDIT: You can get the file name of the selected file this way:

EDIT2: The following code snippet demonstrates the styling of file upload button. Here we are actually faking it but the end user wouldnt know about it. ;)

EDIT3: Added value of fullPath in the comment.

EDIT4: Added <div> wrapper in HTML

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 = this.value; // fetched value = C:\fakepath\fileName.extension  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name  document.getElementById("fileName").innerHTML = fileName;  // display the file name}, false);

#fileUpload{  display: none; /* do not display the actual file upload button */}
#customButton{  /* style the fake upload button */  background: yellow;  border: 1px solid red;}

<div>  <input type="file" id="fileUpload"> <!-- actual file upload button -->  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->  <span id="fileName"></span></div>

How to style button inside of file upload input

As I told you in my comment you can simply create whatever layout and visuals you like to a button and create a file button then simply hide that file button and bind the event on the styled button to trigger the file button.

I've made this example for that purpose:
Codepen with custom file button

Styling a file-upload button

Check this snippet

What you need to do is to provide a label for the input field and style as it would be a button

#upload-photo {    height: 0;    width: 0;}
#upload-photo-label {    border: 1px solid #cccccc;    padding: 5px 30px;    font-family:arial;    font-size: 13px;}#upload-photo-label:active{    background:#ccc;}

<form action="" method="post" enctype="multipart/form-data">  <input type="file"  id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>  <label id="upload-photo-label" for="upload-photo">Browse</label>  <button type="submit" value="Upload!">Upload</button></form>

Modifying the appearance of file upload buttons in ruby on rails or CSS

You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.

There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.

As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.

See below:

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Cross-browser custom styling for file upload button

Cross-browser custom styling for file upload button

I'm posting this because (to my surprise) there was no other place I could find that recommended this.

There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling^[1].

The label tag was made for the exact purpose of directing any click events on it to the child inputs^[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:

label.myLabel input[type="file"] {    position:absolute;    top: -1000px;}
/***** Example custom styling *****/.myLabel {    border: 2px solid #AAA;    border-radius: 4px;    padding: 2px 5px;    margin: 2px;    background: #DDD;    display: inline-block;}.myLabel:hover {    background: #CCC;}.myLabel:active {    background: #CCF;}.myLabel :invalid + span {    color: #A44;}.myLabel :valid + span {    color: #4A4;}

<label class="myLabel">    <input type="file" required/>    <span>My Label</span></label>