How to Hide Default Choose File Button

Hide choose file button of input[type='file'] without hiding file choosen name with simple css

Here you can easily remove choose file button of input type file without losing filename label with just simple CSS.

input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}

css hide Choose File button but display file after select

With the addition of javascript, we can just watch for the change event on the input, and put the name on the page. Please note these minor HTML changes:

<div class="file-upload">
  <label for="upload-1" class="btn">Upload</label>
  <input type="file" id="upload-1">
  <p class="file-name">Please select a file.</p>
</div>

With this jQuery:

jQuery(function($) {
  $('input[type="file"]').change(function() {
    if ($(this).val()) {
         var filename = $(this).val();
         $(this).closest('.file-upload').find('.file-name').html(filename);
    }
  });
});

Working Fiddle

Change the No file chosen :

I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article

Remove input file button and style the files chosen

AFAIK, we can't do much thing to style input file. What we can do is using opacity and appearance trick and makes the input file covering parent element, so user still receive the click event of the input file.

Also you need to use javascript/jQuery to handle what you need. If using javascript/jQuery is not problem for you, below the sample implementation to your [Codepen][1].

[1]: http://codepen.io/mahdaen/pen/Ejwodb

How to style the choose file button only?

You can use attribute for of html to create a button you want then hidden element . See example below:

http://jsfiddle.net/4cwpLvae/

How can I remove the No file chosen tooltip from a file input in Chrome?

This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.

A hacky solution:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

Fiddle

Hide the browse button on a input type=file

No, what you can do is a (ugly) workaround, but largely used

1. Create a normal input and a image
2. Create file input with opacity 0
3. When the user click on the image, you simulate a click on the file input
4. When file input change, you pass it's value to the normal input (so user can see the path)

Here you can see a full explanation, along with code:

http://www.quirksmode.org/dom/inputfile.html

---

Related Topics