[Solved] I don’t want to see ‘no file chosen’ for a file input field

Is there any way where i can stop “no file chosen” for input type file.

<input type="file" id="field-id" name="html" />
Enquirer: sachin k


Solution #1:

You can’t get rid of the ‘no file chosen’ entirely, but you can change the text to something that makes sense by setting the title.

<input type="file" title="foo">

will display “foo” on mouseover instead of “no file chosen”


<input type="file" title="">

doesn’t work like you might hope.

Respondent: Erich Douglass

Solution #2:

Simplest (and reliable as far as I know) hack I’ve found is to set the initial font color to transparent to hide the “no file chosen” text, and then change the font color to something visible on change.


<input type="file" style="color:transparent;" onchange=""black";"/>
Respondent: Will Jenkins

Solution #3:

For Chrome browsers you can use such trick:

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

Meaning setting fixed width that will show only the button then after change change it back to 100% so the file name is displayed.

Solution #4:

<style type="text/css">
#inputcontainer {
    background:url("") no-repeat;

<div id="inputcontainer">
    <input type="file" onchange="document.getElementById('file-path').value = this.value.split('')[this.value.split('').length-1];"/>
    <input type="text" id="file-path"/>
Respondent: kbtz

Solution #5:

Nope, you’d need to create a custom control.

Respondent: alex

Solution #6:

Seems ridiculous for the easiness but for me was enough:

input[type='file'] {
  width: 95px;

Tested on Chrome 20, Safari 5.1.7 and IE 9.

Note: in IE9 is a little weird because left a mini input_text area.

Respondent: jlebrijo

Solution #7:

Try the below code in the mouseover event

jQuery('input').attr('title', ''); 
Respondent: IshaS

Solution #8:

Try this:

<input type="file" title=" "/>

Be careful about the white space – it is important because title=”” does not work.

Respondent: Pavel Nemec

Solution #9:

Even though this is an old post, I think that this answer will be helpful to someone that wishes to do something similar. I wanted a button to insert an image from a mobile device’s camera but I didn’t want the ugly button “[Choose file] No file selected… ” rubbish.

I wanted a button:

  • that I could customize e.g. have a image button
  • a user would click it and it would ask them for some file input
  • use input and post to a server

What I did

  1. create a button element

    • with an onclick="someFunction()" and some id="some_id"
    • an img tag with src="" – to display an image rather than some text
  2. create a input element

    • with type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"
  3. JavaScript

    • When I click the button, it will fire the clickHiddenInput() function that will execute the click event of the element you choose

      function clickHiddenInput() {
      document.getElementById("hidden_input").addEventListener('change', readFile, false);
      function readFile(evt) {
          if (!( < 1)) {
              var data = new FormData();
              var files =;
              var file = files[0];
              data.append("hidden_input", file);
              // do some stuff with the file
Respondent: Donald

Solution #10:

I tried using the width settings, but it doesn’t work in firefox. if you have a solid consistent background, you can just set the color to be the same as the background. I have a white background so I just:

   width: 90px;
   color: #fff;
Respondent: haz0rd

Solution #11:


Then you can design your box whatever style you want. If you click the div it will open the file explorer window.

Respondent: sibaspage

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy