Home

Making Custom File Uploader only with CSS

I have seen many designer and developer are facing problem when file upload button required to be customized. As there is no easy way to select this button with css, many developers does not want to touch this and they leave as default. But it does not mean there is no way to customize this file up-loader. In this tutorial I will show you a simple and quick method to design file upload button.



HTML

For HTML, lets make a form and a input tag with type file. Add this input tag inside a div tag with class file to make it easier to customize. Give name and id for input type file to 'file'. Add a label tag inside div tag after the input tag that is for 'file' and gove a class 'btn'. That's all for HTML, check code with my code bellow to make sure everything is perfect.








<form action="#"> <div class="file"> <input id="file" name="file" type="file"/> <label class="btn" for="file">Upload File</label> </div> </form>

CSS

Now the time to customize this input with css. First of all we will apply position relative to div with class 'file'




.file { position: relative; }
Now add following css to our label




.file label { background: #f0f; padding: 13px 20px; color: #fff; font-size: 1.2em; transition: all .4s; text-transform: uppercase; }
Now we got a nice button to upload file but the default uploader also there. We don't want this to be displayed here but working perfectly. Let's add following css to our input tag.




.file input { position: absolute; display: inline-block; left: 0; top: 0; opacity: 0.01; cursor: pointer; }
Our awesome file uploader is ready. Let's add some effect on hover and focus.




.file input:hover + label, .file input:focus + label { background: #882388; color: #882388; color: #fff; cursor: pointer; }
I believe you have also successfully designed this input field. If you have any confusion, check the complete code bellow or write in comment.
Complete Source Code
Making Custom File Uploader only with CSS Reviewed by Prem Regmi on 4:50:00 PM Rating: 5

No comments:

Designed by Next Bootstrap

Contact Form

Name

Email *

Message *

Powered by Blogger.