Как изменить стиль input file

Примеры изменения вида стандартного поля для загрузки файлов (input[type=file]) с помощью CSS и JS.

<form method="post" enctype="multipart/form-data">
	<label class="input-file">
	   	<input type="file" name="file">
 	   	<span class="input-file-btn">Выберите файл</span>           
	   	<span class="input-file-text">Максимум 10мб</span>
 	</label>
</form>

.input-file {
	position: relative;
	display: inline-block;
}
.input-file-btn {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 4px;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file-text {
	padding: 0 10px;
	line-height: 40px;
	display: inline-block;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

/* Focus */
.input-file input[type=file]:focus + .input-file-btn {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover/active */
.input-file:hover .input-file-btn {
	background-color: #59be6e;
}
.input-file:active .input-file-btn {
	background-color: #2E703A;
}

/* Disabled */
.input-file input[type=file]:disabled + .input-file-btn {
	background-color: #eee;
}

$('.input-file input[type=file]').on('change', function(){
	let file = this.files[0];
	$(this).closest('.input-file').find('.input-file-text').html(file.name);
});

<form method="post" enctype="multipart/form-data">
	<label class="input-file">
	   	<input type="file" name="file">		
	   	<span>Выберите файл</span>
 	</label>
</form>

.input-file {
	position: relative;
	display: inline-block;
}
.input-file span {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 4px;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

/* Focus */
.input-file input[type=file]:focus + span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover/active */
.input-file:hover span {
	background-color: #59be6e;
}
.input-file:active span {
	background-color: #2E703A;
}

/* Disabled */
.input-file input[type=file]:disabled + span {
	background-color: #eee;
}

$('.input-file input[type=file]').on('change', function(){
	let file = this.files[0];
	$(this).next().html(file.name);
});

<form method="post" enctype="multipart/form-data">
	<label class="input-file">
	   	<span class="input-file-text" type="text"></span>
	   	<input type="file" name="file">        
 	   	<span class="input-file-btn">Выберите файл</span>
 	</label>
</form>

.input-file {
	position: relative;
	display: inline-block;
}
.input-file-text {
	padding: 0 10px;
	line-height: 40px;
	text-align: left;
	height: 40px;
	display: block;
	float: left;
	box-sizing: border-box;
	width: 200px;
	border-radius: 6px 0px 0 6px;
	border: 1px solid #ddd;
}
.input-file-btn {
position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 0 4px 4px 0;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

/* Focus */
.input-file input[type=file]:focus + .input-file-btn {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover/active */
.input-file:hover .input-file-btn {
	background-color: #59be6e;
}
.input-file:active .input-file-btn {
	background-color: #2E703A;
}

/* Disabled */
.input-file input[type=file]:disabled + .input-file-btn {
	background-color: #eee;
}

$('.input-file input[type=file]').on('change', function(){
	let file = this.files[0];
	$(this).closest('.input-file').find('.input-file-text').html(file.name);
});

<form method="post" enctype="multipart/form-data">
	<div class="input-file-row">
		<label class="input-file">
		   	<input type="file" name="file[]" multiple>		
		   	<span>Выберите файл</span>
 		</label>
		<div class="input-file-list"></div>  
	</div>  
</form>

.input-file-row {
	display: inline-block;
}
.input-file {
	position: relative;
	display: inline-block;
}
.input-file span {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 4px;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

/* Focus */
.input-file input[type=file]:focus + span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover/Active */
.input-file:hover span {
	background-color: #59be6e;
}
.input-file:active span {
	background-color: #2E703A;
}

/* Disabled */
.input-file input[type=file]:disabled + span {
	background-color: #eee;
}

/* Список файлов */
.input-file-list {
	padding: 10px 0;
}
.input-file-list-item {
	margin-bottom: 10px;
}
.input-file-list-remove {
	color: red;
	text-decoration: none;
	display: inline-block;
	margin-left: 5px;
}

var dt = new DataTransfer();

$('.input-file input[type=file]').on('change', function(){
	let $files_list = $(this).closest('.input-file').next();
	$files_list.empty();

	for(var i = 0; i < this.files.length; i++){
		let new_file_input = '<div class="input-file-list-item">' +
			'<span class="input-file-list-name">' + this.files.item(i).name + '</span>' +
			'<a href="#" onclick="removeFilesItem(this); return false;" class="input-file-list-remove">x</a>' +
			'</div>';
		$files_list.append(new_file_input);
		dt.items.add(this.files.item(i));
	};
	this.files = dt.files;
});

function removeFilesItem(target){
	let name = $(target).prev().text();
	let input = $(target).closest('.input-file-row').find('input[type=file]');	
	$(target).closest('.input-file-list-item').remove();	
	for(let i = 0; i < dt.items.length; i++){
		if(name === dt.items[i].getAsFile().name){
			dt.items.remove(i);
		}
	}
	input[0].files = dt.files;  
}

<form method="post" enctype="multipart/form-data">
	<div class="input-file-row">
		<label class="input-file">
		   	<input type="file" name="file[]" multiple accept="image/*">		
		   	<span>Выберите файл</span>
 		</label>
		<div class="input-file-list"></div>  
	</div>
</form>

.input-file-row {
	display: inline-block;
}
.input-file {
	position: relative;
	display: inline-block;
}
.input-file span {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	border-radius: 4px;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

/* Focus */
.input-file input[type=file]:focus + span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Hover/active */
.input-file:hover span {
	background-color: #59be6e;
}
.input-file:active span {
	background-color: #2E703A;
}

/* Disabled */
.input-file input[type=file]:disabled + span {
	background-color: #eee;
}

/* Список c превью */
.input-file-list {
	padding: 10px 0;
}
.input-file-list-item {
	display: inline-block;
	margin: 0 15px 15px;
	width: 150px;
	vertical-align: top;
	position: relative;
}
.input-file-list-item img {
	width: 150px;
}
.input-file-list-name {
	text-align: center;
	display: block;
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
}
.input-file-list-remove {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	position: absolute;
	padding: 0;
	margin: 0;
	top: 5px;
	right: 5px;
	background: #ff0202;
	width: 16px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	border-radius: 50%;
}

var dt = new DataTransfer();

$('.input-file input[type=file]').on('change', function(){
	let $files_list = $(this).closest('.input-file').next();
	$files_list.empty();
 
	for(var i = 0; i < this.files.length; i++){
		let file = this.files.item(i);
		dt.items.add(file);    
   
		let reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onloadend = function(){
			let new_file_input = '<div class="input-file-list-item">' +
				'<img class="input-file-list-img" src="' + reader.result + '">' +
				'<span class="input-file-list-name">' + file.name + '</span>' +
				'<a href="#" onclick="removeFilesItem(this); return false;" class="input-file-list-remove">x</a>' +
			'</div>';
			$files_list.append(new_file_input); 
		}
	};
	this.files = dt.files;
});

function removeFilesItem(target){
	let name = $(target).prev().text();
	let input = $(target).closest('.input-file-row').find('input[type=file]');	
	$(target).closest('.input-file-list-item').remove();	
	for(let i = 0; i < dt.items.length; i++){
		if(name === dt.items[i].getAsFile().name){
			dt.items.remove(i);
		}
	}
	input[0].files = dt.files;  
}

13 июня 2018, 13:23
  
Alex

HTML и CSS

1
  
53097





+1

Эта статья поможет изменить вид поля для отправки данных input[type=file],
который по умолчанию довольно невзрачный. Ниже приведены 3 примера оформления input file на все случаи жизни. Вам достаточно скопировать готовый код к себе на сайт.

Пример 1: Стилизация Input File под скрепку

HTML разметка

  

      attach_file
      Добавить файл
      
    
  

CSS стилизация

.example-1 .form-group{padding:1em;margin:1em}
.example-1 input[type=file]{outline:0;opacity:0;pointer-events:none;user-select:none}
.example-1 .label{width:120px;border:2px dashed grey;border-radius:5px;display:block;padding:1.2em;transition:border 300ms ease;cursor:pointer;text-align:center}
.example-1 .label i{display:block;font-size:42px;padding-bottom:16px}
.example-1 .label i,.example-1 .label .title{color:grey;transition:200ms color}
.example-1 .label:hover{border:2px solid #000}
.example-1 .label:hover i,.example-1 .label:hover .title{color:#000}

Пример 2: Input File с иконкой

HTML разметка

CSS оформление

.example-2 .btn-tertiary{color:#555;padding:0;line-height:40px;width:300px;margin:auto;display:block;border:2px solid #555}
.example-2 .btn-tertiary:hover,.example-2 .btn-tertiary:focus{color:#888;border-color:#888}
.example-2 .input-file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.example-2 .input-file + .js-labelFile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;cursor:pointer}
.example-2 .input-file + .js-labelFile .icon:before{content:"f093"}
.example-2 .input-file + .js-labelFile.has-file .icon:before{content:"f00c";color:#5AAC7B}

JS скрипт

Данный скрипт позволяет менять внешний вид Input File (появится зеленая галочка) после того, как файл будет загружен.

(function() {
  
  'use strict';

  $('.input-file').each(function() {
    var $input = $(this),
        $label = $input.next('.js-labelFile'),
        labelVal = $label.html();
    
   $input.on('change', function(element) {
      var fileName = '';
      if (element.target.value) fileName = element.target.value.split('\').pop();
      fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
   });
  });

})();

Пример 3: Брутальный Input File

Загрузить файл

HTML разметка

    

    Загрузить файл
    
  

CSS стилизация

@import "https://fonts.googleapis.com/css?family=Varela+Round";
.example-3{box-sizing:border-box}
.example-3{position:relative;font:1em/1.6 "Varela Round",Arial,sans-serif;color:#999;font-weight:400;max-width:25em;padding:1em;}
.example-3 h2{font-weight:400}
.example-3 .filupp > input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.example-3 .filupp{position:relative;background:#242424;display:block;padding:1em;font-size:1em;width:100%;height:3.5em;color:#fff;cursor:pointer;box-shadow:0 1px 3px #0b0b0b}
.example-3 .filupp:before{content:"";position:absolute;top:1.5em;right:.75em;width:2em;height:1.25em;border:3px solid #dd4040;border-top:0;text-align:center}
.example-3 .filupp:after{content:"f178";font-family: FontAwesome;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);position:absolute;top:.65em;right:.45em;font-size:2em;color:#dd4040;line-height:0}
.example-3 .filupp-file-name{width:75%;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}

JS скрипт

Скрипт отображает имя файла после его загрузки.

$(document).ready(function() {

	$('input[type="file"]').change(function(){
		var value = $("input[type='file']").val();
		$('.js-value').text(value);
	});

});

Поделиться с друзьями

Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация checkbox и radio

HTML CSS JS

Стилизация Input File

Дата размещения статьи 19/04/2020 👁14238

tl;dr

Styling file inputs using CSS and the label technique allows you to customize the look and feel. This technique conforms to semantics, is accessible, and cross-browser compliant. Check out the code and example below.

CSS

[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
[type="file"] + label {
  /* File upload button styles */
}
[type="file"]:focus + label,
[type="file"] + label:hover {
  /* File upload hover state button styles */
}
[type="file"]:focus + label {
  /* File upload focus state button styles */
}

HTML

<input type="file" id="file" /> 
<label for="file">Upload</label>

Or if you prefer Sass — and who doesn’t:

SCSS

[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
  + label {
    // File upload button styles
  }
  &:focus + label,
  + label:hover {
    // File upload hover state button styles
  }
  &:focus + label {
    // File upload focus state button styles
  }
}

Styling File Inputs Demo

See the Pen Beautiful CSS-Only File Inputs by Ben Marshall (@bmarshall511) on CodePen.

Styling File Inputs Guide

I’ve spent countless hours styling file inputs using a number of different techniques out there. The end result is always the same — frustration. A common (IMO worst) technique to style file inputs is faking buttons with extra, non-semantic HTML, CSS, and JS. Dirty, dirty, dirty, not to mention the drawbacks for usability and touch. Don’t fret! There is a better way.

The Problem

Trying and failing to style a <input type="file" /> control is a twisted rite of passage in the web dev world. There’s a (very) long thread on Stack Overflow dedicated to it. The problem is every browser has a different way of implementing <input type="file" /> and few can be styled with CSS.

The label technique is a great solution to style file inputs since pressing the <label> triggers the focus event for the bound input. Since we’re dealing with file inputs, it works out as a click event. This results in the file browser pop-up and is a great semantic solution! No JavaScript, no other complex solutions like cursor position tracking, and just these two lines.

CSS File Input label Technique

Styling clean, semantic and accessible upload buttons require two things: CSS & label. I’ll go over how and demonstrate how a little extra JS (optional) can enhance the UX. The input file CSS possibilities are limitless once you understand how this technique works!

First, create the semantic HTML.

You’ll start with the HTML semantic for a file input. It must have a label preceding it, this will become the upload button:

HTML

<input type="file" id="file" />
<label for="file">choose a file</label>

Next, hide the native button.

Bet you’re thinking display: none or visibility: hidden? Nope. Those won’t work because the input value won’t be sent to the server when submitted. It’ll also be excluded out of the tab order making it no longer accessible. In order to keep it accessible, use the following CSS:

CSS

[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}

Why 1x1px? Setting property values to zero ends up throwing the element out of tab order in some browsers. position: absolute guarantees the element does not interfere with the sibling elements. Don’t forget when styling file inputs, accessibility is an important factor.

The fun part, styling the upload button.

Now we’ll style the file input by using the <label> element as the upload button. From there, use your creative CSS juices on it! Check out the basic example below:

CSS

[type="file"] + label {
  background-color: #000;
  border-radius: 4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  height: 4rem;
  line-height: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  transition: background-color 0.3s;
}
[type="file"]:focus + label,
[type="file"] + label:hover {
    background-color: #f15d22;
}
[type="file"]:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

The complete code.

Let’s put it all together, here’s the complete code below:

CSS

[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
[type="file"] + label {
  background-color: #000;
  border-radius: 4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding-left: 2rem 4rem;
}
[type="file"]:focus + label,
[type="file"] + label:hover {
    background-color: #f15d22;
}
[type="file"]:focus + label {
  outline: 1px dotted #000;
}

It’s that easy! You can now adjust the styling as needed to create your own upload button to match your site styles.

The accessible part.

How do you know that an element on the website is accessible?

1. Elements should communicate a feeling that you can tap or click on it.
2. The cursor icon should change to an appropriate one when hovering the element.
3. Tabbed keyboard navigation should be intuitive.

The label technique covers all of these requirements.

More about keyboard navigation.

If users are unable to navigate your website using just a keyboard, you are doing something wrong. Hiding the input correctly and indicating when the element is focused (i.e. rendering [type="file"]:focus on the label). ensures this functionality stays intact.

Touch Issues with FastClick

In case you’ve been using FastClick (a library for eliminating the 300ms tap-pause on touch-capable devices) and have plans to add some extra markup to the content of a label, the button won’t work as it should, unless you use pointer-events: none, respectively:

[type="file"] + label * {
  pointer-events: none;
}

Enhance the UX with JavaScript

When styling file inputs, it’s important to provide users with feedback when a file is selected for upload. When hiding the native file input, users don’t have a way to tell a file was selected.

There’s a simple fix with some JavaScript that’ll provide this functionality:

1. When the user selects a file, the text of a label will become the name of the selected file.
2. If there were multiple files selected, the text will tell us how many of them were selected.

Check out the example below:

HTML

<input type="file" name="file" id="file" data-multiple-caption="{count} files selected" multiple />

JS

var inputs = document.querySelectorAll( '.inputfile' );
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;
    }
  });
});

Having the native [multiple] attribute allows users to select more than one file per upload. Whereas [data-multiple-caption] is a fictive attribute for expressing the message if multiple files were selected. Here you can set a custom message. The use of the {count} phrase is optional and the fragment is replaced with the number of files selected.

An interesting thing is that you can unset a value of the input by pressing the ESC button while in the file browser. This is possible only in Chrome and Opera. Therefore, we use labelVal for storing the default value of the label and bringing it back when necessary.

[multiple] is not supported in IE 9 and below; neither is the files property of JavaScript. For the latter case, we simply rely on value. Since it usually has a value of C:fakepathfilename.jpg format, the split( '\' ).pop() extracts what’s actual — the name of the file.

There is also a jQuery version of this code you can download here.

No JavaScript, no problem!

Since there is no JavaScript-less way to indicate if any files were selected, it would be better to rely on the default looks of the file input for the sake of usability.

Styling file inputs with an enhanced UX is a cinch. All we need to do is to add a .no-js class name to the <html> element. We’ll use JavaScript to remove it if available — that’s how we’ll determine if our JS enhancement will work.

Many frameworks like Foundation and Bootstrap already do this.

<html class="no-js">
  <head>
    <!-- remove this if you use Modernizr -->
    <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|s)no-js(s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

.js [type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
.no-js [type="file"] + label {
  display: none;
}

Firefox Bug Fix

There’s a known Firefox bug when it comes to styling file inputs that completely ignores the input[type="file"]:focus expression, yet :hover and :active work just fine — don’t ask me why. However, Firefox allows us to catch the focus event using JavaScript. This workaround adds a class to the file input element letting us control the focus style:

JS

input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });

CSS

[type="file"]:focus + label,
[type="file"].has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

Using a CSS framework?

Many popular CSS frameworks like Foundation and Bootstrap already have a way to customize upload buttons. Check out the examples below.

Styling File Inputs with Foundation

Customizing the file upload button in Foundation uses the same technique above. To hide the native upload button it uses the visibility class for screen readers (.show-for-sr).

Use Foundation’s settings file to update variables to customize the button to your liking. The HTML structure follows the same pattern shown above:

<label for="file" class="button">Upload File</label><input type="file" id="file" class="show-for-sr" />

Styling File Inputs with Bootstrap

Bootstrap’s method for styling file inputs isn’t as clean or optimized as this technique or Foundations’ — just another reason I prefer Foundation over Bootstrap. It requires additional JavaScript in order for it to override the native upload button.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="file">
  <label class="custom-file-label" for="file">Choose file</label>
</div>

This method may not be as clean, but it does provide a little more flexibility for translations:

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

<div class="custom-file">
  <input type="file" class="custom-file-input" id="file" lang="es">
  <label class="custom-file-label" for="file">Seleccionar Archivo</label>
</div>

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. English strings can be customized the same way.

Styling File Input Alternatives

Like with most things in web development, there’s more than one way to skin a cat. Here’s some other popular techniques to style file inputs:

• Using Web Components to Style File Inputs by TJ VanToll
• jQuery File Upload
• jQuery FileAPI
• Kendo UI

In Conclusion

Styling file inputs is a problem web developers have been trying to solve for years. With this workaround we finally have a solid, semantic and accessible solution.

There are quite a few techniques for “customizing” the <input type="file" /> element. I tried most of them, but none was good enough to have on Readerrr (for importing feeds by uploading a file). Probably the worst technique was the one where the input element is put into a container (which imitates a button), and the input follows the cursor so that when you click anywhere on the container, you actually click the input. Sounds interesting and weird at the same time, right? Anyway, it had some unacceptable drawbacks (usability, touch).

As as result, I tried googling for an unseen solution. Once it seemed that there was nothing new, my I eyes were caught by a comment on StackOverflow. It had just a few up votes and was lost somewhere in the middle of the page, but most importantly it contained a magic word – <label>! As you may know, pressing a label basically triggers the focus event for the bound input. Interesting thing is that, if it is a file input, it works out as a click event, resulting in opening a file browser. This is great for crafting a semantic solution.

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

So, pressing any of these two elements gives us the same result. That means that the most difficult part is… solved! No JavaScript, no other complex solutions like cursor position tracking, just these two lines. See for yourself:

Now let’s just style it and make this look like a normal button.

Hiding the <input>

First off, we need to hide the ugly duckling. CSS properties such as display: none or visibility: hidden will not work out. The reasons are: the input value will not be sent to the server on form submit; the input will be excluded out of tab order (you want your website to be accessible, right?). I set up a combination of CSS properties/values for hiding the input visually but keeping it visible for the browser:

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

I see you are wondering why width and height are set to 0.1px instead of just 0px. Setting the property values to zero ends up throwing the element out of tab party in some browsers. And position: absolute guarantees the element does not interfere with the sibling elements.

Styling the <label>

Since the <label> element is visually the button, you can use all of your creative CSS juices on it. I’m sticking to something very simple for now:

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

Accessibility

How do you know that an element on the website is pressable? Firstly, the element should communicate a feeling that you can tap or click on it. Secondly, the cursor icon should change to an appropriate one when hovering the element. The former we’ve solved previously, let’s solve the latter, because labels do not trigger a cursor change by default:

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

Keyboard Navigation

If users are unable to navigate on your website using just a keyboard, you are doing something wrong. Hiding the input itself in a correct manner was one thing, the other is indicating when the element is focused, i.e. rendering .inputfile:focus on the label:

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

-webkit-focus-ring-color auto 5px is a little trick for obtaining default outline looks on Chrome, Opera and Safari. The style in the line above is for browsers that do not understand the -webkit… expression.

Possible Touch Issues

In case you’ve been using FastClick (a library for eliminating the 300ms tap-pause on touch-capable devices) and have plans to add some extra markup to the content of a label, the button won’t work as it should, unless you use pointer-events: none, respectively:

<label for="file"><strong>Choose a file</strong></label>

.inputfile + label * {
	pointer-events: none;
}

JavaScript Enhancement

Probably and hopefully the last thing missing is indicating if files were selected. The file input does usually indicate that, but in our case the input is visually hidden. Luckily, there is a way out: a tiny JavaScript enhancement. The text of a label becomes the name of the selected file. If there were multiple files selected, the text will tell us how many of them were selected.

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />

var inputs = document.querySelectorAll( '.inputfile' );
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;
	});
});

There is also a jQuery version of this code presented in the source of the demo files. Make sure to check them out.

A little explanation:

• Having the native [multiple] attribute allows users to select more than one file per upload. Whereas [data-multiple-caption] is a fictive attribute for expressing the message if multiple files were selected. Here you can set a custom message. The use of the {count} phrase is optional and the fragment is replaced with the number of files selected. The reason I use an additional HTML attribute instead of assigning this sentence as a value for a JavaScript variable is because it’s much easier to maintain the copy when it is in one place.
• HTML attribute [multiple] is not supported in IE 9 and below and neither is the files property of JavaScript. For the latter case, we simply rely on value. Since it usually has a value of C:fakepathfilename.jpg format, the split( '' ).pop() extracts what’s actual – the name of the file.
• An interesting thing is that you can unset a value of the input by pressing the ESC button while in the file browser. This is possible only in Chrome and Opera. Therefore, we use labelVal for storing the default value of the label and bringing it back when necessary.

This is how the final result looks like:

What if JavaScript is not available?

Since there is no JavaScript-less way to indicate if any files were selected, it would be better to rely on the default looks of the file input for the sake of usability. All we need to do is to add a .no-js class name to the <html> element and then use JavaScript and replace it with .js – that’s how we will know if JavaScript is available.

<html class="no-js">
    <head>
        <!-- remove this if you use Modernizr -->
        <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|s)no-js(s|$)/,"$1js$2")})(document,window,0);</script>
    </head>
</html>

The CSS part accordingly:

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

.no-js .inputfile + label {
    display: none;
}

Firefox Bug

It is quite unexpected that Firefox completely ignores the input[type="file"]:focus expression, whereas :hover and :active work just fine! Surprisingly, Firefox allows to catch the focus event in JavaScript, so the workaround is adding a class to the file input element that let’s us control the focus style:

input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

Check out the example styles in the demo to see how to style the file input element according to your needs. Make sure to take a look at the source code of the demo and feel free to use this technique in your projects. Happy uploading!

The icon in the demo is made by Daniel Bruce from www.flaticon.com and it is licensed under CC BY 3.0.

Здравствуйте уважаемые читатели блога webcodius.ru! Одной из самых сложных задач для верстальщика является стилизация элементов формы так, как видит их дизайнер. Тем более по умолчанию такие поля как select, checkbox или file совершенно отличаются внешне в разных браузерах. В этой статье рассмотрим способы стилизации поля для загрузки файла, чтобы оно одинаково выглядело в большинстве браузеров.

На мой взгляд, наиболее оптимальным решением будет обернуть поле input с типом file в тег label. Затем скрываем поле input file, а при клике по элементу label будет вызываться окно выбора файла.

Html — код вставки поля для загрузки файла в этом случае будет таким:

<div id="file-upload">
<label>
<input type="file" name="file" id="uploade-file">
<span>Выберите файл</span>
</label>
</div>

Далее задаем CSS стили для наших элементов:

.file-upload input[type=»file»]{
display: none;/* скрываем input file */
}
/* задаем стили кнопки выбора файла*/
.file-upload {
position: relative;
overflow: hidden;
width: 250px;
height: 40px;
background: #4169E1;
border-radius: 10px;
color: #fff;
text-align: center;
}
.file-upload:hover {
background: #1E90FF;
}
/* Растягиваем label на всю область блока .file-upload */
.file-upload label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* стиль текста на кнопке*/
.file-upload span {
line-height: 40px;
font-weight:bold;
}

Большинство CSS правил для класса .file-upload можно менять под Ваши нужды (такие как background, border-radius, color, width и height), так как они в основном отвечают за внешний вид кнопки выбора файла. 

В результате в окне браузера мы видим стилизованную кнопку выбора файла, по клику на которой появляется окно выбора файла:

Осталась дна проблема. При выборе файла, визуально это никак не отобразиться, а хотелось бы видеть имя загружаемого файла. Это может понадобиться, что бы пользователь мог проверить, тот ли файл он загружает. В стандартном поле input file имя загружаемого файла отображается рядом с кнопкой выбора файла, а в нашем стилизованном этого нет. Для исправления этой ситуации потребуется использовать javascript. 

Для начала добавим в html-код дополнительный элемент элемент div для вывода имени загружаемого файла и добавим обработчик на событие onchange:

<div class=»file-upload»>
<label>
<input type=»file» name=»file» onchange=»getFileName ();» id=»uploaded-file»>
<span>Выберите файл</span>
</label>
</div>
<div id=»file-name»></div>

 Далее добавляем код javascript, который вставляет имя файла в элемент <div id=»file-name»>:

function getFileName () {
var file = document.getElementById (‘uploaded-file’).value;
file = file.replace (/\/g, «/»).split (‘/’).pop ();
document.getElementById (‘file-name’).innerHTML = ‘Имя файла: ‘ + file;
}

В результате получим такой вариант поля input file:

При выборе файла под кнопкой появляется текст с названием файла. Данный способ стилизации input file точно работает в браузерах IE9+, Chrome, Firefox, Mozilla и Opera. Кроме того многие браузеры позволяют получать размер и разрешение выбранного файла. Также можно сделать предпросмотр выбранного файла в случае если загружается картинка. Например, такой вариант:
 

Код к последнему примеру можно скачать по ссылке.

На этом все, до новых встреч!

Once unpublished, all posts by ibn_abubakre will become hidden and only accessible to themselves.

If ibn_abubakre is not suspended, they can still re-publish their posts from their dashboard.

Note:

Once unpublished, this post will become invisible to the public and only accessible to Abdulqudus Abubakre.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community 👩‍💻👨‍💻 safe. Here is what you can do to flag ibn_abubakre:

Make all posts by ibn_abubakre less visible

ibn_abubakre consistently posts content that violates DEV Community 👩‍💻👨‍💻’s
code of conduct because it is harassing, offensive or spammy.