How to Style a HTML file upload button in Pure CSS


 

Styling a html file upload button in pure css could be cumbersome if you’ve ever tried. Take a look at the following screenshot about how different browsers deal with the upload button. It’s pretty obvious that there is a fair amount of variation.

Upload

We are aiming for creating a neat file upload button which behaves finely and consistently in pure css cross browsers. And here we go:

Step 1. Create a simple html markup

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Step 2. CSS: Tricky Part

.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);
}

For simplicity, I am using Bootstrap CSS to style the button (div.file-upload).

image

Upload button with selected file

Unfortunately there is no PURE CSS way to do it. However, if you really want to display the selected file, the following JavaScript snippet could help for this case.

JavaScript:

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

DOM change

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

image

(Thanks to : http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/)

Happy Coding Smile

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s