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

Question

I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".

Do you guys know any way how to remove this text?

adding this to the input seemed to work in webkit.... style="width: 80px; height: 25px; overflow: hidden;" — Peter, May 24 '11 at 02:55
Possible duplicate: http://stackoverflow.com/questions/1084925/input-type-file-show-only-button — Thom Smith, May 24 '11 at 05:26

score 46 · Answer 1 · answered Oct 22 '13 at 13:57

46

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

Enjoy

answered Oct 22 '13 at 13:57

Ajey

7,924
12
62
86

1

Mouseover or cursor-change is still there. – MERose Feb 17 '16 at 22:29
I just spent an hour trying half a dozen different techniques off stackexchange to do this - all more complicated and not one of them worked on late model Firefox on Linux. Your method is simple, elegant and works perfectly. Thank you. – jkcunningham Jan 31 '22 at 03:29

score 14 · Accepted Answer · answered May 24 '11 at 02:35

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.

score 9 · Answer 3 · edited May 23 '17 at 12:34

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.

score 2 · Answer 4 · edited May 23 '17 at 12:18

2

You can replace the file field with a button with the answer to this question: file upload button without input field?

edited May 23 '17 at 12:18

Community

1
1

answered Mar 19 '14 at 00:37

BrightIntelDusk

4,577
2
25
34

score 1 · Answer 5 · edited Feb 17 '14 at 15:25

1

This is a really good hack and its a lot cleaner.

HTML

<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>

JS

function displayFileName() {
    var files = $('input[type="file"]')[0].files;
    document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}

edited Feb 17 '14 at 15:25

AlexB

7,302
12
56
74

answered Apr 10 '13 at 04:11

Carlos Pliego

859
1
8
19

score 1 · Answer 6 · answered Oct 15 '13 at 08:13

CSS
<style>
#image_file{
   position: relative;
   width: 188px;
   border: 1px solid #BBB;
   margin: 1px;
   cursor: pointer;
   float: left;
  }
</style>

HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
    <input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >


JAVASCRIPT
function getFile(){
   document.getElementById("PinSpot_file").click();
 }

// Event when change fields
$('#PinSpot_file').live('change', function(e) {     
  var file = this.value;
  var fileName = file.split("\\");
  document.getElementById("image_file").value = fileName[fileName.length-1];

   //AJAX
}

Seth M. · Answer 7 · 2020-12-10T20:18:57.823

Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..

CSS

input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}

and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.

HTML

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

or, you could do it all with JavaScript.

JS

document.addEventListener('DOMContentLoad', myFunction);

function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}

score 0 · Answer 8 · answered Apr 18 '23 at 12:06

0

I think you cannot. you can using css to hide that label "No File Choosen" by decreasing width of input file control. I have used below code to do it for myself

Css Code

input[type=file] {
    width: 93%;
}

answered Apr 18 '23 at 12:06

Heemanshu Bhalla

3,603
1
27
53

Madhuka Dilhan · Answer 9 · 2021-07-29T01:57:01.093

-2

You can try this. Its work for me firefox browser

<style type="">
    input[type='file'] {
       color: transparent;
    }
</style>

edited Jul 29 '21 at 01:57

answered Jan 19 '21 at 06:03

Madhuka Dilhan

1,396
1
14
21

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

9 Answers9

Linked