October 1, 2015

Customize your upload button

Customize your upload button with a few codes here

Here the html

<div class=”fileUpload”>
<input id=”uploadedimage” class=”uploadedimage” name=”profile_image” type=”file”>
</div>

Following by css

.fileUpload {
background-image: url(http://www.sgkidsco.com/wp-content/themes/zolix/img/upload-button.png) !important;
height: 40px;
background-repeat: no-repeat;
color: rgba(255, 255, 255, 0);
}
input.uploadedimage {
opacity:0;
width:100%;
height:40px;
}

 

You can the preview at jsfiddle

http://jsfiddle.net/shakalya/usrphx5y/

You may also like...

Leave a Reply