Alter input type="file" label content

Question

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 come 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?

Use a different browser… (Seriously, I really wouldn't mess with the default rendering of standard form controls to that extent). — Quentin
– 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
– RonaldBarzell, Commented Dec 3, 2012 at 14:20

A. Wolff · Accepted Answer · 2013-07-27 12:28:52Z

7

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');
        }
    });
});

edited Jul 27, 2013 at 12:28

answered Dec 3, 2012 at 14:22

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luca Davanzo · Accepted Answer · 2012-12-03 14:26:26Z

0

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%';"/>

answered Dec 3, 2012 at 14:26

Luca Davanzo

21.6k15 gold badges124 silver badges152 bronze badges

Comments

alex · Accepted Answer · 2013-10-22 02:49:23Z

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.

name your input[type=file] element.
name your form element and put the input[type=file] in it.
make a span and place it below the input in the form. This will be your label.
use CSS to set the input's height to 0px and opacity to 0, this will make it invisible.
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.net/aressler38/L5r8L/1/

Bitdom8 · Accepted Answer · 2022-09-17 18:04:37Z

0

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" />

answered Sep 17, 2022 at 18:04

Bitdom8

1,4821 gold badge14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Alter input type="file" label content

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related