Change default text in input type=“file”?

Question

I want to change default text on button that is "Choose File" when we use input="file".

How can I do this? Also as you can see in image button is on left side of text. How can I put it on right side of text?

Answer 1

Ok so very simple pure css way of creating your custom input file.

Use labels, but as you know from previous answers, label doesn't invoke onclick function in firefox, may be a bug but doesn't matter with the following.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

What you do is style the label to look how you want it to

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

now simply hide the actual input button, but you cant set it to to visability: hidden

So make in invisible by setting opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

now as you might have noticed i have the same class on my label as i do my input field, that is because i want the to both have the same styling, thus where ever you click on the label, you are actually clicking on the invisible input field.

Answer 2

This should work:

input.className::-webkit-file-upload-button { style content.. }