Style your input type file with CSS only

Hello, dear friends & welcome to CSS party. In this tutorial I’m gonna show you how to style an input type file using CSS only.

First, as you know the input type file can’t be styled by CSS but we will do some tricks to change its style.
Second the trick I’ll show you will help you style the input file as you want with no limitations.

Html Markup

the trick here is to put the input type file inside of a div as you can 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 on 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 on the hover event.

.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à this is just a small example of how to style the input type file you can make it better it’s all up to your skills in CSS.
Thank you for reading and feel free to ask me anything in the comments section and don’t forget to share this article with your friends.

2 comments On Style your input type file with CSS only

  • Using px size is not recommended today, with a wide variety of screen sizes, you should use em instead.
    It will accord with default screen type size. You can also play with border radius (for rounded corners) and box shadow, for matching your global style.
    Cheers

Leave a reply:

Your email address will not be published.

Site Footer