I was wondering if there is any way to hide or change the content of the default label:No file chosen for

<input type="file" id="myFileInput"/>

What I e up with so far is to decrease its length by half, so that it displays a tooltip.

$('input:file').css('width', parseFloat($($('input:file')).css('width'))/2 );

Any Ideas?

I was wondering if there is any way to hide or change the content of the default label:No file chosen for

<input type="file" id="myFileInput"/>

What I e up with so far is to decrease its length by half, so that it displays a tooltip.

$('input:file').css('width', parseFloat($($('input:file')).css('width'))/2 );

Any Ideas?

• javascript
• jquery
• html
• css

• 2 Use a different browser… (Seriously, I really wouldn't mess with the default rendering of standard form controls to that extent). – Quentin Commented Dec 3, 2012 at 14:18
• Here here. Some of these renderings were done for good reasons, and quite a bit of the web usability issues we have nowadays can be traced back to people circumventing perfectly good default behaviors. Still, if you are required to do this for work, you may not have much of a choice. – RonaldBarzell Commented Dec 3, 2012 at 14:20

4 Answers 4

You cannot change input file design as its native to each browser. But you still can simulate it, sorry hacky:

See DEMO

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple />​

JS:

$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});

You can also proceed in this way, but it is an hack:

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

Chrome was giving me this problem too. I tried to set all sorts of CSS selectors, but nothing seemed to work well. However, I did find a solution by using the FORM element.

1. name your input[type=file] element.
2. name your form element and put the input[type=file] in it.
3. make a span and place it below the input in the form. This will be your label.
4. use CSS to set the input's height to 0px and opacity to 0, this will make it invisible.
5. make the span positioned absolutely and to the left 0px.

<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");

    span.onclick = function(event) {
        document.form.file.click(event);
    };

    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

I tested this in Chrome and FF, not ie, but I hope this helps. jsfiddle http://jsfiddle/aressler38/L5r8L/1/

Simple style with just CSS. You HTML button will read attributes from CSS. No need javascript slowing down the page.

CSS should be as below:

.editable:empty:before {
        content: attr(data-placeholder);
    }

    .custom-file-input::before {
        content: attr(placeholder);
        /* content: 'Select some files'; */
}

input button should be:

<input class="custom-file-input" placeholder="#Hashtags " bind:files id="many" multiple type="file" />