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.