I don't want to see 'no file chosen' for a file input field

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.

Voilá:

<input type="file" style="color:transparent;" onchange="this.style.color = 'black';"/> 

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"

unfortunately,

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

doesn't work like you might hope.

For Chrome browsers you can use such trick:

<input type="file" id="myFile" name="html" style="width: 90px;" onchange="this.style.width = '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.

<style type="text/css"> #inputcontainer { background:url("http://phpfileuploader.com/images/upload.png") no-repeat; height:50px; width:250px; } input[type="file"]{ opacity:0; height:48px; width:48px; } </style> <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"/> </div> 

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.

Try the below code in the mouseover event

jQuery('input').attr('title', ''); 

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

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="someimage" - 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").click(); } document.getElementById("hidden_input").addEventListener('change', readFile, false); function readFile(evt) { if (!(evt.target.files.length < 1)) { var data = new FormData(); var files = evt.target.files; var file = files[0]; data.append("hidden_input", file); // do some stuff with the file } } 

Try this:

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

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

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:

input.remove-no-file-chosen { width: 90px; color: #fff; } 

input[type=file]{ opacity:0; } 

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

2021_11_17 in Chrome version 96.x will working. You only need CSS.

<input type="file" style="width:70px"> 

It's will hidden Text and cut width. You can mix more better with example:

<input type="file" style="width:70px;color:transparent"> 

It's will hidden Text, cut Width, Transparent text in other Browser.