How to remove "no file selected" from type=file inputs?

You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).

input {
    width: 132px;
    overflow:hidden;
}

Here is the demonstration on jsfiddle.

Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!

My answer was based on this similar question on stackoverflow.


input[type='file'] {
  color: transparent;
}

Enjoy


There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.