input type=file show only button

javascript html css
Andrija picture Andrija · Jul 6, 2009 · Viewed 244.1k times · Source

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.

Answer

shiba picture shiba · Feb 11, 2013 
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

This will surely work i have used it in my projects.I hope this helps :)

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More