Styling input type file element

Styling input type file element

3 min. read

HTML markup

<!DOCTYPE html>
<html>
	<head>
		<title>Styling input type file only using css</title>
	</head>
	<body>
		<div>
		Choose file<input type="file">
		</div>
	</body>
</html>

CSS rules

Styling the body element

body
{ 
	margin:0px; /* Remove the default 8px margin */
	padding:30px;
	font-family:Helvetica,arial,sans-serif;
}

Styling the container div element

div
{
	/* Our input type file element is going to be absolute positioned so the div element should be relatively positioned to act as container for it. */
	position:relative;

	width:80px;

	/* Aligning the div at the center of the webpage horizontally and providing some space from top of webpage */
	margin:80px auto;

	/* Making the div better looking */
	padding:10px 12px;
	text-align:center;
	color:#fff;
	font-size: 15px;
	background-color: #F44336;

	/* Converting pointed corners of div to slightly rounded */
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;

	/* Adding some shadow and bottom border for 3D effect */
	border-bottom: 4px solid #cb2619;
	
	box-shadow: 0px 7px 15px #f56c6c;
	-webkit-box-shadow: 0px 7px 15px #f56c6c;
	-moz-box-shadow: 0px 7px 15px #f56c6c;
	-o-box-shadow: 0px 7px 15px #f56c6c;
	-ms-box-shadow: 0px 7px 15px #f56c6c;
	
	/* Hide that part of input type file element that is overflowed out of container div */
	overflow:hidden;
}

See result in the fiddle below

Styling the input type file element

input[type="file"]
{
	/* Apply absolute positioning and move it to top-left corner of parent div element */
	position:absolute;
	top:0px;
	left:0;
	
	/* Making the file input element to cover the whole div element */
	right:0px;
	bottom:0px;
	width:100%;
	
	/* Hiding the tap color when it is clicked on touch devices ( this is not widely supported ) */
	-webkit-tap-highlight-color:transparent;
}

See result in the fiddle below

Click here to read more about -webkit-tap-highlight-color.

Applying more css to input type file element

input[type="file"]
{
	/* Make it invisible ( it is present at it's position but just invisible ) */
	opacity:0;

	/* Move it to the upper layer above the container div's layer to ensure that it is always clickable */
	z-index:1;
}

See result in the fiddle below

Click here to read more about z-index css property.

CSS for the event when div element get clicked

div:active
{
	/* Make clicking 3D */
	/* Move down 2px when clicked ( original top margin is 80px and here it is 2px more )*/
	margin-top:82px;

	/* Reduce bottom border width by 2px to create the effect as if the div was pressed down */
	border-bottom-width:2px;

	/* Decreasing the y-axis shadow by 2px & blur radius by 2px and darkning the shadow color to enhance the 3D effect */
	/* y-axis shadow is decreased because as div will be clicked it's bottom border is reduced by 2px i.e it's height will be decreased so in turn shadow height should decrease and it should become more darker */
	box-shadow: 0px 5px 13px #ea4539;
	-webkit-box-shadow: 0px 5px 13px #ea4539;
	-moz-box-shadow: 0px 5px 13px #ea4539;
	-o-box-shadow: 0px 5px 13px #ea4539;
	-ms-box-shadow: 0px 5px 13px #ea4539;
}

See final result in the fiddle below

Write comments