Menu
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 ?
232
Set the position to "relative" for the wrapper so as the element is placed relative to its normal position. Set the display of the "button" class to "inline-block" so as the element displays as an inline-level block container. Set the color of the text and the background-color of the button. Set the padding.
Use a label tag and point its for attribute to the id of the default HTML file upload button. By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
I have this rough example that you might want to get some idea...
<div id="file">Chose file</div> <input type="file" name="file" /> #file { display:none; } var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this); $('#file').text($this.val()); }) $('#file').click(function(){ fileInput.click(); }).show();
164
After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).
<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;"> </div> Then you can of course style the "file" div as you want.
And if you want to use a type="text" input instead of a div, simply change innerHTML for value:
<div style="position:relative;"> <input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file"> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;"> </div> Here is my original answer using jQuery:
<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());"> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
