How to Style a HTML File Upload button Using CSS

by

In this tutorial we will learn how to style file button using pure CSS. Different browser show different appearance file upload button .We will learn how we can customize file upload button with use of CSS . Create a file upload button which will appear same consistently on different browser. Using HTML to create file upload button and style it using CSS. File upload button will display same on every browser using given below CSS.
See Demo

How to Style a HTML File Upload button Using CSS
How to Style a HTML File Upload button Using CSS

HTML

<label class="input-file">
Choose File<input type="file" name="resume" />
 </label>

CSS

<style>
input[type="file"]
{
  opacity:0;
 -moz-opacity: 0;
 /* IE 5-7 */
 filter: alpha(Opacity=0);
 /* Safari  */
  -khtml-opacity: 0;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

 }
 .input-file 
{
   text-align: center;
    background-color: #3276b1;
    color: #fff;
    display: block;
    width: 114px;
    height: 23px;
    font-size: 17px;
    color: #fff;
    padding: 5px;
    font-weight: bold;
    border-radius: 10px;
 }
 </style>

This is simple and easy approach to style file upload button using pure CSS as you have seen above. The main concept is we make opacity:0 to input file element to be invisible of file upload button. We can use display:none also instead of opacity to make disappear of file upload button. If you liked this article 🙂 please share with your friends and colleagues 🙂 . If you have any query please write in comment.
Demo
[sociallocker]Download[/sociallocker]

Leave a Comment