Styling an upload button

Question

How do I style the normal upload file button using CSS?

<input type="file">

I have tried styling using bootstrap classes but it's only the surrounding area around the button that is being styled.

Have you read http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button ? — Salar, Mar 17 '14 at 08:50

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

I had same problem and gone through so many example and found this solution try this ..i hope this will help you DEMO

HTML

<div class="duplicate">SelectPicture</div><br>
<input id="orginal" type='file'" /><br>

CSS

.duplicate {
    background-color:blue;
    width:100px;
    height:40px;
}
.duplicate:hover{
    background-color:green;
}

#orginal {
 display:none;
}

Jquery

$(document).ready(function(){
$('.duplicate').bind("click" , function () {
        $('#orginal').click();
    });
});

See this link

edited May 23 '17 at 12:02

Community

1
1

answered Mar 17 '14 at 09:03

kamesh

2,374
3
25
33

This is simple and works better than all those other solutions...thanks – Ian Mukunya Douglas Mar 17 '14 at 09:21

Styling an upload button

1 Answers1