anpleenko
5/21/2016 - 2:44 PM

How to Style a HTML file upload button in Pure CSS Step 1. Create a simple html markup Step 2. CSS: Tricky Part

How to Style a HTML file upload button in Pure CSS

Step 1. Create a simple html markup Step 2. CSS: Tricky Part

style.css
content_copyfile_download
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
index.html
content_copyfile_download
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>