Adding style to file upload button in css

Question

I have a text field and button with following css:

JS fiddle link : http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px         


        

Answer 1

You could also use jQuery, like this:

<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

And this jquery code

$("#image").click(function(){
 $("#photosubmit").click();
});

Hopes this helps someone too!

Answer 2

Here is a link. You can change style of button.

HTML

<button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>

CSS

button {
    border-radius:10px;
    padding:5px;
}
#html_btn {
    display:none;
}

Javascript

$('button').bind("click", function () {
    $('#html_btn').click();

});
$('#html_btn').change(function () {
    document.getElementById("f").value = $('#html_btn').val();
});