input type=file show only button

user_84852 0
Viewed 291230

Is there a way to style (or script) <input type=file /> element to have visible only "Browse" button without text field?

Thanks

Edit: Just to clarify why to I need this. I'm using multi file upload code from http://www.morningz.com/?p=5 and it doesn't need input text field because it never has value. Script just adds newly selected file to collection on page. It would look much better without text field, if it's possible.

css html javascript
32 Answers

That's going to be very hard. The problem with the file input type is that it usually consists of two visual elements, while being treated as a single DOM-element. Add to that that several browsers have their own distinct look and feel for the file input, and you're set for nightmare. See this article on quirksmode.org about the quirks the file input has. I guarantee you it won't make you happy (I speak from experience).

[EDIT]

Actually, I think you might get away with putting your input in a container element (like a div), and adding a negative margin to the element. Effectively hiding the textbox part off screen. Another option would be to use the technique in the article I linked, to try to style it like a button.

Erik_van_Brakel_9090

You can give the input element a font opacity of 0. This will hide the text field without hiding the 'Choose Files' button.

No javascript required, clear cross browser as far back as IE 9

E.g., 

input {color: rgba(0, 0, 0, 0);}
user_85400140

Ive a really hacky solution with this...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

The problem is the width attribute that is hiding the text field will obvously vary between browsers, vary between Windows XP themes and so on. Maybe its something you can work with though?...

Admin1

I Don't Know what your talking about, if you trying to style a input type file into a button that is easy for me all you will need is just html and CSS.

#File-Body>#File-For {
  display: none;
}

#Filebutton {
  width: 50px;
  height: 20px;
  border: 1px solid;
  border-radius: 2px;
  text-align: center;
}

#File-Body {
  width: 300px;
  height: 30px;
}
<div id="File-Body">
  <label id="File-Lable" for="File-For">
    <div id="Filebutton">Edit</div>
  </label>
  <input id="File-For" type="file">
</div>

If you want to test it Here it is http://jsfiddle.net/qm8j45c3/

user_130856070

There is a simple and hacky way to show only the file input button while keeping the render and translations of this file input button :

Make the text that is displayed after a file input invisible using a the color transparent.

<input type="file" style="color: transparent" />
user_30423060
Related