Style your input type file with CSS only

Hello dear friends & welcome to css party. In this tutorial im gonna show you how to style the input type file using css only.

First as you know the input type file can’t be totally styled by css but we can do some tricks to make it beautiful.
Second the trick i’ll show you will help you style the input file as you want without boundaries.

Html Markup

the trick here is to put the input type file inside of a div, as you see in this example it’s called .in-f-box then we put the input inside of it plus a span with the message inside of it.

<div class="in-f-box">
	<input type="file">
	<span>Click here to import your file!</span>
</div>

The Css

In the css we will be focused in styling the input file type container i mean the div with the class .in-f-box. And that is the trick, after styling the container we will give the input type file zero opacity to make it invisible but still clickable.

	.in-f-box{
		color: #fff;
		background: blue;
		display: block;
		cursor: pointer;
		font-size: 1.2em;
		border-radius: 5px;
		width: 300px;
		height: 100px;
		line-height: 100px;
		position: relative;
		text-align: center;
	}
	.in-f-box input[type=file]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

Bonus

Let’s add some transitions to make it intuitive

	.in-f-box{
		color: #fff;
		background: blue;
		display: block;
		cursor: pointer;
		font-size: 1.2em;
		border-radius: 5px;
		width: 300px;
		height: 100px;
		line-height: 100px;
		position: relative;
		text-align: center;
		
		/* Transition Background */
		-webkit-transition: background .4s ease;
	  	-moz-transition: background .4s ease;
	  	-o-transition: background .4s ease;
	  	-ms-transition: background .4s ease;
	  	transition: background .4s ease;
	}
	.in-f-box:hover{
		background: #222;
	}

And voilĂ  thank you for reading and feel free to ask me anything in the comments section.

Leave a Reply

Your email address will not be published. Required fields are marked *