How to change the button text of ?

Question

I tried to modify the value, but it's not working. How to customize the button text?

user_187606 · Answer

The "upload file..." text is pre-defined by the browser and can't be changed. The only way to get around this is to use a Flash- or Java-based upload component like swfupload.

user_5337602 · Answer

Simply


   Your text here

[Edit with snippet]





 Your text here

user_4673076 · Answer

Only CSS & bootstrap class




  
  
    browse

user_5127736 · Answer

I know, nobody asked for it but if anybody is using bootstrap, it can be changed through Label and CSS Pseudo-selector.

For changing button text:

.custom-file-label::after {
  content: "What's up?";
}

For changing field text:

Drop it like it's hot

Here's a fiddle.

user_166339 · Answer

EDIT: I see now by the comments that you are asking about the button text, and not the file path. My bad. I'll leave my original answer below in case someone else who stumbles upon this question interprets it the way I originally did.

2nd EDIT: I had deleted this answer because I decided that I misunderstood the question and my answer was not relevant. However, comments in another answer indicated that people still wanted to see this answer so I'm undeleting it.

MY ORIGINAL ANSWER (I thought the OP was asking about the path, not the button text):

This is not a supported feature for security reasons. The Opera web browser used to support this but it was removed. Think about what would be possible if this were supported; You could make a page with a file upload input, pre-populate it with a path to some sensitive file and then auto-submit the form using javascript triggered by the onload event. This would happen too fast for the user to do anything about it.

user_4367848 · Answer

In Addition to MushyPeas answer, you can add a label to show the filename like so (no jQuery needed):
Credits also to this answer.


Bla bla

user_4613299 · Answer

In Bootstrap +4.5 you can simply add this to your code:

.custom-file-input~.custom-file-label::after {
  content: "Your custom text ...";
}




  
  Your custom placeholder ...

user_6584883 · Answer

You can simply add some css trick. you don't need javascript or more input files and i keep existing value attribute. you need to add only css. you can try this solution.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

user_11359101 · Answer

Here is a way to "change" the text of an input with file type, with pure HTML and javascript:

user_8327665 · Answer

for me it does not work the custom text with bootstrap-filestyle. It help with button decoration but text its weird to be changed, before get into wrestling with css i try the following :

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle render the component as span with a class named butonText, so when document load just change the text. easy right and it must work on all browsers.

cheers

user_13041034 · Answer

I did it like this for my project:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

Your text

user_6508528 · Answer

What about icons without using real images and "interactivity"?

Check the following example that doesn't use any image, not even javascript, and also it is interactive in the sense that changes its look on mouse events as on mouse-over and on mouse left or right click.

input
{
  padding: 10px;
  width: 100%;
}

input::file-selector-button
{
  display: none;
}

input::before
{
  border: 1px solid red;
  border-radius: 3px 8px 3px 8px;
  color: red;
  content: attr(value)' Some more text';
  margin: 25px;
  padding: 5px;
}

input:hover:before
{
  border: 1px groove blue;
  background: lime;
}

input:active:before
{
  border: 1px groove blue;
  background: yellow;
}

How it works:

Basically, it hides the main button of the standard file input element and shows its pseudo element, indicated by the :before part. Than it styles how it looks like and also some mouse events, so it is kind of "interactive".

Also using the :file-selector-button pseudo-element, allows to style the button it self or even to not display it at all as I have done int the above example with the code display: none;. This allows to use the :before element as replacement of the button.

The advantage of doing it with css is that by not using any javascript it will work even if the user's browser has javascript disabled.

About the folder icon:

Actually it is a char it self in UNICODE: that is U+1F4C2 code-point. To see it correctly the user of the page must have a font that supports it. I did not install any new font into my system (Win7) and I see it correctly: so I suppose it is correctly seen by everyone else.

How to change the button text of <input type="file" />?

23 Answers

What about icons without using real images and "interactivity"?

How it works:

About the folder icon: