Chrome 中的 HTML input type="file" 不显示文本框

Question

I have problem with <input type="file" /> in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?

Answer 1

This is the default behavior of Google chrome as well as Safari. Read this blog for a solution

Answer 2

The box is there, although it is not designed. It might be on the "wrong" side of the window, but it's there.

Just for the matter - put a border around it - and you'll see it's there.

  <input type="file" style="border: solid 1px red">

Also, after you select a file - you get the name of it.

Answer 3

<input type="file"/> has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.

If you really want a file upload to look/behave different from the default implementation flash is the way to go.

For example many sites use sfwUpload . For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.

Another way to work with the file upload inputs are to make them invisible via visibility: hidden , position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.

Answer 4

You could override the default behaviour and swap the control appearence alltogether. Found this today researching how to edit the css on fileupload.

Answer 5

The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.

Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.

Answer 6

I found a link from someone else who was having this problem, solution here .

It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)

edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!

Answer 7

Sometimes it is just caused by a javascript code similar to this one:

function someOnClickHandler(e)
{
    e.preventDefault();  // it kills the file dialog
}

// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler); 

Answer 8

Most of the times type file got display:none style. In that case use !important to display the input field.

<input id="cv_file" type="file" name="cv" style="display:block !important;"/>