Input type file

PHP

<form action="/" method="post" autocomplete="off" enctype="multipart/form-data">
	<div class="box_wrap">
		
		<!-- box 1 -->
		<div class="box">
			<input type="file" name="file-1[]" id="file-1" class="input_file input_file_1" data-multiple-caption="{count} files selected" multiple />
			<label for="file-1">
				<?= svg('iconUpload', '') ?>
				<span>Choose a file</span>
			</label>
		</div>
		
		<!-- box 2 -->
		<div class="box">
			<input type="file" name="file-2[]" id="file-2" class="input_file input_file_2" data-multiple-caption="{count} files selected" multiple />
			<label for="file-2">
				<?= svg('iconUpload', '') ?>
				<span>Choose a file</span>
			</label>
		</div>
		
		<!-- box 3 -->
		<div class="box">
			<input type="file" name="file-3[]" id="file-3" class="input_file input_file_3" data-multiple-caption="{count} files selected" multiple />
			<label for="file-3">
				<?= svg('iconUpload', '') ?>
				<span>Choose a file</span>
			</label>
		</div>
		
		<!-- box 3.1 -->
		<div class="box">
			<input type="file" name="file-4[]" id="file-4" class="input_file input_file_3" data-multiple-caption="{count} files selected" multiple />
			<label for="file-4">
				<span>Choose a file</span>
			</label>
		</div>
		
		<!-- box 4 -->
		<div class="box">
			<input type="file" name="file-5[]" id="file-5" class="input_file input_file_4" data-multiple-caption="{count} files selected" multiple />
			<label for="file-5">
				<figure>
					<?= svg('iconUpload', '') ?>
				</figure>
				<span>Choose a file</span>
			</label>
		</div>
		
		<!-- box 5 -->
		<div class="box">
			<input type="file" name="file-6[]" id="file-6" class="input_file input_file_5" data-multiple-caption="{count} files selected" multiple />
			<label for="file-6">
				<figure>
					<?= svg('iconUpload', '') ?>
				</figure>
				<span></span>
			</label>
		</div>
		
		<!-- box 6 -->
		<div class="box">
			<input type="file" name="file-7[]" id="file-7" class="input_file input_file_6" data-multiple-caption="{count} files selected" multiple />
			<label for="file-7">
				<span></span>
				<strong>
					<?= svg('iconUpload', '') ?>
					Choose a file
				</strong>
			</label>
		</div>
		
		<!-- box 7 -->
		<div class="box default_input_file" style="background: #ffffff; border: .1rem solid #dfc8ca">
			<span>Upload a Picture</span>
			<input type="file" name="file-8[]" id="file-8" class="input_file" data-multiple-caption="{count} files selected" multiple />
			<label for="file-8" class="input">
				<?= svg('iconUpload', '') ?>
				<span>Choose a file</span>
			</label>
		</div>
		
	</div>
</form>

Mention

/* Box styles */
.box_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0;margin:0 -2rem}
.box{background-color:#dfc8ca;padding:5rem 2rem;text-align:center;display:inline-block;width:-webkit-calc(100%/2 - 4rem);width:-moz-calc(100%/2 - 4rem);width:calc(100%/2 - 4rem);margin:2rem}

CSS

.input_file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.input_file + label{max-width:80%;font-size:2rem;font-weight:700;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:inline-block;overflow:hidden;padding:1rem 2rem;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.input_file + label svg{width:2rem;height:2rem;vertical-align:middle;color:#fff;margin-top:-.4rem;margin-right:.4rem;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}

/* style 1 */
.input_file_1 + label{color:#f1e5e6;background-color:#d3394c}
.input_file_1:focus + label,.input_file-1.has_focus + label{background-color:#722040}

/* style 2 */
.input_file_2 + label{color:#d3394c;border:.2rem solid #d3394c}
.input_file_2 + label svg{color:#d3394c}
.input_file_2.has_focus + label svg{color:#722040}
.input_file_2:focus + label,.input_file_2.has_focus + label{color:#722040;border:.2rem solid #722040}

/* style 3 */
.input_file_3 + label{color:#d3394c}
.input_file_3:focus + label,.input_file_3.has_focus + label{color:#722040}
.input_file_3:focus + label svg,.input_file_3.has_focus + label svg{color:#722040}
.input_file_3 + label svg{color:#d3394c}

/* style 4 */
.input_file_4 + label{color:#d3394c}
.input_file_4:focus + label,.input_file_4.has_focus + label{color:#722040}
.input_file_4 + label figure{width:100px;height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#d3394c;display:block;padding:20px;margin:0 auto 10px;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.input_file_4:focus + label figure,.input_file-4.has_focus + label figure{background-color:#722040}
.input_file_4 + label svg{width:100%;height:100%;color:#f1e5e6}

/* style 5 */
.input_file_5 + label{color:#d3394c}
.input_file_5:focus + label,.input_file_5.has_focus + label{color:#722040}
.input_file_5 + label figure{width:10rem;height:13.5rem;background-color:#d3394c;display:block;position:relative;padding:3rem;margin:0 auto 1rem;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.input_file_5:focus + label figure,.input_file_5.has_focus + label figure{background-color:#722040}
.input_file_5 + label figure::before,.input_file_5 + label figure::after{width:0;height:0;content:'';position:absolute;top:0;right:0;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.input_file_5 + label figure::before{border-top:2rem solid #dfc8ca;border-left:2rem solid transparent}
.input_file_5 + label figure::after{border-bottom:2rem solid #722040;border-right:2rem solid transparent}
.input_file_5:focus + label figure::after,.input_file_5.has_focus + label figure::after{border-bottom-color:#d3394c}
.input_file_5 + label svg{width:100%;height:100%;color:#f1e5e6}

/* style 6 */
.input_file_6 + label{color:#d3394c;border:.1rem solid #d3394c;background-color:#f1e5e6;padding:0}
.input_file_6:focus + label,.input_file_6.has_focus + label{border-color:#722040}
.input_file_6 + label span,.input_file_6 + label strong{padding:1rem 2rem}
.input_file_6 + label span{width:20rem;min-height:4rem;display:inline-block;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:top}
.input_file_6 + label strong{height:100%;color:#f1e5e6;background-color:#d3394c;display:inline-block;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.input_file_6:focus + label strong,.input_file_6.has_focus + label strong{background-color:#722040}

/* style 7 */
.default_input_file {text-align: left;}
.default_input_file span {font-size: 1.6rem;}
.input_file + label.input{display:block;max-width:100%;margin:.5rem 0 1.3rem;padding:.6rem 1.6rem 0}
.input_file + label.input svg{color:#d3394c}
.input_file + label.input span{font-size:1.6rem}
.input_file:focus + label.input svg,.input_file.has_focus + label svg,.input_file:focus + label.input span,.input_file.has_focus + label span{color:#722040}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.input_file_1 + label:hover{background-color:#722040}
	.input_file_2 + label:hover{color:#722040;border:.2rem solid #722040}
	.input_file_2 + label:hover svg{color:#722040}
	.input_file_3 + label:hover{color:#722040}
	.input_file_3 + label:hover svg{color:#722040}
	.input_file_4 + label:hover{color:#722040}
	.input_file_4 + label:hover figure{background-color:#722040}
	.input_file_5 + label:hover{color:#722040}
	.input_file_5 + label:hover figure{background-color:#722040}
	.input_file_5 + label:hover figure::after{border-bottom-color:#d3394c}
	.input_file_6 + label:hover{border-color:#722040}
	.input_file_6 + label:hover strong{background-color:#722040}
	.input_file:hover + label.input svg,.input_file:hover + label.input span{color: #722040;}
}

@media screen and (max-width: 550px) {
	.input_file_6 + label strong{display:block}
}

SCSS

/* Vars */
$white:           #ffffff;
$white2:          #f1e5e6;
$red2:            #d3394c;
$redLight:        #dfc8ca;
$redLight2:       #f1e5e6;
$redDark:         #722040;

.input_file {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.input_file + label {
	max-width: 80%;
	font-size: 2rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	padding: 1rem 2rem;
	transition:all .3s linear;
}

.input_file:focus + label,
.input_file.has_focus + label {
	//outline: .1rem dotted $cb;
	//outline: -webkit-focus-ring-color auto .5rem;
}

.input_file + label * {
	/* pointer-events: none; */
	/* in case of FastClick lib use */
}

.input_file + label svg {
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
	color: $white;
	margin-top: -.4rem;
	margin-right: .4rem;
	transition: all .3s linear;
}

/* style 1 */
.input_file_1 + label {
	color: $white2;
	background-color: $red2;
}

.input_file_1:focus + label,
.input_file_1.has_focus + label {
	background-color: $redDark;
}

/* style 2 */
.input_file_2 + label {
	color: $red2;
	border: .2rem solid $red2;
}

.input_file_2 + label svg {
	color: $red2;
}

.input_file_2.has_focus + label svg {
	color: $redDark;
}

.input_file_2:focus + label,
.input_file_2.has_focus + label {
	color: $redDark;
	border: 0.2rem solid $redDark;
}

/* style 3 */
.input_file_3 + label {
	color: $red2;
}

.input_file_3:focus + label,
.input_file_3.has_focus + label {
	color: $redDark;
}

.input_file_3:focus + label svg,
.input_file_3.has_focus + label svg {
	color: $redDark;
}

.input_file_3 + label svg {
	color: $red2;
}

/* style 4 */
.input_file_4 + label {
	color: $red2;
}

.input_file_4:focus + label,
.input_file_4.has_focus + label {
	color: $redDark;
}

.input_file_4 + label figure {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: $red2;
	display: block;
	padding: 20px;
	margin: 0 auto 10px;
	transition:all .3s linear;
}

.input_file_4:focus + label figure,
.input_file_4.has_focus + label figure {
	background-color: $redDark;
}

.input_file_4 + label svg {
	width: 100%;
	height: 100%;
	color: $white2;
}

/* style 5 */
.input_file_5 + label {
	color: $red2;
}

.input_file_5:focus + label,
.input_file_5.has_focus + label {
	color: $redDark;
}

.input_file_5 + label figure {
	width: 10rem;
	height: 13.5rem;
	background-color: $red2;
	display: block;
	position: relative;
	padding: 3rem;
	margin: 0 auto 1rem;
	transition:all .3s linear;
}

.input_file_5:focus + label figure,
.input_file_5.has_focus + label figure {
	background-color: $redDark;
}

.input_file_5 + label figure::before,
.input_file_5 + label figure::after {
	width: 0;
	height: 0;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	transition:all .3s linear;
}

.input_file_5 + label figure::before {
	border-top: 2rem solid $redLight;
	border-left: 2rem solid transparent;
}

.input_file_5 + label figure::after {
	border-bottom: 2rem solid $redDark;
	border-right: 2rem solid transparent;
}

.input_file_5:focus + label figure::after,
.input_file_5.has_focus + label figure::after {
	border-bottom-color: $red2;
}

.input_file_5 + label svg {
	width: 100%;
	height: 100%;
	color: $white2;
}

/* style 6 */
.input_file_6 + label {
	color: #d3394c;
}

.input_file_6 + label {
	border: .1rem solid $red2;
	background-color: $white2;
	padding: 0;
}

.input_file_6:focus + label,
.input_file_6.has_focus + label {
	border-color: $redDark;
}

.input_file_6 + label span,
.input_file_6 + label strong {
	padding: 1rem 2rem;
}

.input_file_6 + label span {
	width: 20rem;
	min-height: 4rem;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: top;
}

.input_file_6 + label strong {
	height: 100%;
	color: $redLight2;
	background-color: $red2;
	display: inline-block;
	transition:all .3s linear;
}

.input_file_6:focus + label strong,
.input_file_6.has_focus + label strong {
	background-color: $redDark;
}

/* style 7 */
.default_input_file {
	text-align: left;
	span {
		font-size: 1.6rem;
	}
}

.input_file + label.input {
	display: block;
	max-width: 100%;
	margin: .5rem 0 1.3rem;
	padding: .6rem 1.6rem 0;
	
	svg {
		color: $red2;
	}
	
	span {
		font-size: 1.6rem;
	}
}

.input_file:focus + label.input svg,
.input_file.has_focus + label svg,
.input_file:focus + label.input span,
.input_file.has_focus + label span {
	color: $redDark;
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.input_file_1 + label:hover {
		background-color: $redDark;
	}
	
	.input_file_2 + label:hover {
		color: $redDark;
		border: 0.2rem solid $redDark;
	}
	
	.input_file_2 + label:hover svg {
		color: $redDark;
	}
	
	.input_file_3 + label:hover {
		color: $redDark;
	}
	
	.input_file_3 + label:hover svg {
		color: $redDark;
	}
	
	.input_file_4 + label:hover {
		color: $redDark;
	}
	
	.input_file_4 + label:hover figure {
		background-color: $redDark;
	}
	
	.input_file_5 + label:hover {
		color: $redDark;
	}
	
	.input_file_5 + label:hover figure {
		background-color: $redDark;
	}
	
	.input_file_5 + label:hover figure::after {
		border-bottom-color: $red2;
	}
	
	.input_file_6 + label:hover {
		border-color: $redDark;
	}
	
	.input_file_6 + label:hover strong {
		background-color: $redDark;
	}
	
	.input_file:hover+ label.input svg,
	.input_file:hover + label.input span{
		color: $redDark;
	}
}

@media screen and (max-width: 550px) {
	.input_file_6 + label strong {
		display: block;
	}
}

JavaScript

function inputFile (){
	var inputs = document.querySelectorAll('.input_file');
	Array.prototype.forEach.call(inputs, function(input) {
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;
		
		input.addEventListener('change', function(e) {
			var fileName = '';

			if (this.files && this.files.length > 1) {
				fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
			} else {
				fileName = e.target.value.split('\\').pop();
			}
			
			if (fileName) {
				label.querySelector('span').innerHTML = fileName;
			} else {
				label.innerHTML = labelVal;
			}
		});
		
		// Firefox bug fix
		input.addEventListener('focus', function () {
			input.classList.add('has_focus');
		});
		
		input.addEventListener('blur', function () {
			input.classList.remove('has_focus');
		});
	});
}

inputFile();

With Progress

Used Sprites.

Sprites Generators: Toptal, Inettools

PHP

<form action="/" method="post" autocomplete="off" enctype="multipart/form-data">
	<div class="box_wrap">
		<div class="box box-1">
			<label class="upload_file" for="uploadFile">
				<span>Upload Photo</span>
				<input type="file" name="file[]" class="input_file_upload" id="uploadFile">
			</label>
		</div>
	</div>
</form>

CSS

.upload_file{display:inline-block;width:100%;max-width:19.8rem;text-align:left;background:transparent;border:.1rem solid #d3394c;color:#d3394c;padding:1rem 2rem 1rem 4rem;cursor:pointer;-webkit-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;transition:all 200ms ease-out;white-space:nowrap;position:relative}
.upload_file::before{content:'';position:absolute;top:1.4rem;left:1.3rem;display:block;width:2rem;height:2rem;background-image:url(/img/sprite_input_file.png);-webkit-background-size:2rem 2rem;-moz-background-size:2rem;-o-background-size:2rem;background-size:2rem;background-position:0 0;-webkit-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;transition:all 200ms ease-out}
.upload_file span{display:block;max-width:100%;font-size:2rem;font-weight:700;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;transition:all 200ms ease-out}
.upload_file input{display:none}
.upload_file .progress{width:0;height:.5rem;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;border-radius:.3rem;position:absolute;left:0;bottom:-1.2rem;background:#32ba7c}
.upload_file.done .progress{width:100%;-webkit-animation:progress 1s ease-in;-webkit-animation-fill-mode:forwards}
.upload_file.done2::before{background-position:0 2rem;-webkit-filter:brightness(1);filter:brightness(1)}

@-webkit-keyframes progress {
	0%{width:0}
	100%{width:100%}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.upload_file:hover{border-color:#722040}
	.upload_file:hover::before{-webkit-filter:brightness(0.5);filter:brightness(0.5)}
	.upload_file:hover span{color:#722040}
	.upload_file:hover.done2::before{-webkit-filter:brightness(1);filter:brightness(1)}
}

SCSS

/* Vars */
$red2:            #d3394c;
$redDark:         #722040;
$green:           #32BA7C;

.upload_file {
	display: inline-block;
	width: 100%;
	max-width: 19.8rem;
	text-align: left;
	background: transparent;
	border: .1rem solid $red2;
	color: $red2;
	padding: 1rem 2rem 1rem 4rem;
	cursor: pointer;
	transition: all 200ms ease-out;
	white-space: nowrap;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 1.4rem;
		left: 1.3rem;
		display: block;
		width: 2rem;
		height: 2rem;
		background-image: url('/img/sprite_input_file.png');
        background-size: 2rem;
		background-position: 0 0;
		transition: all 200ms ease-out;
    }
	
	span {
		display: block;
		max-width: 100%;
		font-size: 2rem;
		font-weight: 700;
		text-overflow: ellipsis;
		overflow: hidden;
		transition: all 200ms ease-out;
	}
	
	input {
		display: none;
	}
	
	.progress{
		width: 0;
		height: .5rem;
		border-radius: .3rem;
		position: absolute;
		left: 0;
		bottom: -1.2rem;
		background: $green;
	}
	
	&.done {
		.progress{
			width: 100%;
			-webkit-animation: progress 1s ease-in;
			-webkit-animation-fill-mode: forwards;
		}
	}
	
	&.done2 {
		&::before {
			background-position: 0 2rem;
			filter: brightness(1);
		}
	}
}

@-webkit-keyframes progress {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover){
	.upload_file:hover{
		border-color: $redDark;
		
		&::before{
			filter: brightness(0.5);
		}
		
		span{
			color: $redDark;
		}
		
		&.done2 {
			&::before {
				filter: brightness(1);
			}
		}
	}
}

JavaScript

$('.input_file_upload').change(function() {
	var $this = $(this);
	var file = $(this)[0].files[0].name;
	var parent = $(this).closest('.upload_file');
	$(this).prev('span').text(file);
	parent.append('<span class="progress"></span>');
	parent.addClass('done');
	parent.removeClass('done2');
	setTimeout(function(){
		parent.addClass('done2');
		parent.find('.progress').remove();
		$this.prev('span').text('FILE\'S READY!');
	}, 1500);
});