Create custom file chosen input type using Css and Jquery | 2my4edge

15 July 2013

Create custom file chosen input type using Css and Jquery

Usually we know how to give input type file for upload any kind of file in the database, for that we are using form, and in that form we have to give input type="file" for file upload, usually while we are calling the input type as like the above, that will change for each browser, for that and make the file input type in custom design using Css and Jquery. let see how it is.

DOWNLOAD                LIVE DEMO


most of the social media and more sites have this kind of custom file chosen button for their flexible. because it change for all different browser. for that we have to make designed image for that replace of default style.

FILE INPUT TYPE

<label class="cabi"> 
<input type="file" class="file"  />
</label>
Just assign one label before the input type and close the label after the input type, for hide the original style of input type='file'.

CSS

<style type="text/css">
.style-chosen label.cabi
{
    margin:0 auto;
    margin-top:250px;
    width: 150px;
    height: 80px;
    background:url(file.png) 0 0 no-repeat;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.style-chosen label.cabi .file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    cursor:pointer;
    -moz-opacity: 0;
}
</style>
.style-chosen is called in the script, just call the class before all the class. and call the scripts

SCRIPTS

<script type="text/javascript" src="si.files.js"></script>
<script type="text/javascript">
SI.Files.stylizeAll()
</script>

Just call the function as SI.Files.styleAll() in the si.files.js source file too. and make some changes in si.files.js. and the custom file chosen button is ready. and we can give any kind of image as you need in the label background. that could takes as the format of custom file chosen button. 


RELATED POSTS:

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Facebook Style Textarea Auto Grow Using JQuery Plugin and Css

Floating menu using Jquery plugin

Better and Flexible Tooltip using LiteTooltip.js

Change text & background color while selecting text using CSS3

Change the colored image into black and white image on image hover

1 comment:

  1. Pretty neat! thank you very nuch for sharing

    ReplyDelete

^