I would like to style <input type="file" />
using CSS3.
Alternatively, I would like user to press on a div
(that I will style) and this will open the Browse window.
Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?
I would like to style Alternatively, I would like user to press on a Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ? |
|||||||
|
I have this rough example that you might want to get some idea... html
CSS
jQuery
demo |
|||||||||||||
|
After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a
Then you can of course style the "file" div as you want. And if you want to use a
Here is my original answer using jQuery:
|
||||
|
Here's an example that I'm using that utilizes jQuery, I've tested against Firefox 11, and Chrome 18, as well as IE9. So its pretty compatible with browsers in my book, though i only work with those three. HTMLHere's a basic "Customizable" HTML structure.
CSSHere's a sample of my CSS
JavaScriptThis is the heavy lifter.
ExplanationThe HTML is pretty straight forward, just a simple element, i include the button so it can be named independently from the rest, sure this could be included in the JavaScript, but simply put, I'm a bit on the lazy side. The code searches for all inputs with a class of smallInput that have the type of file this allows you to define default HTML and fallback form structure in case a browser decides to be a pain. This method only uses JavaScript to ensure delivery, it does not alter any browser behaviors in regards to the file input. You can modify the HTML and JavaScript to make it very robust, this code suffices my current project so i doubt I'll be making any changes to it. Caveats
|
||||
|
I made a custom style for this as well. Check it out JS Fiddle Demo - Custom Input type="file" HTML
CSS
JQuery
Also add to external resources tab: https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css |
|||
|
Here is a solution with a text field where the user types in the (relative) pathname of the file copy on the server (if authorized) and a submit button to browse the local system for a file and send the form:
The scripting part hides the file input, clicks it if the user clicks on the submit button, submits the form if the user has picked up a file. If the user tries to upload a file without entering a filename, the focus is first moved to the text field for the filename.
Simply style the submit button for a perfect result:
|
||||
|
In addition of Reigel, here is more simpler implementation. You can use this solution on multiple file input fields, too. Hope this helps some people ;-) HTML (single input)
HTML (multiple input)
JavaScript
|
|||
|