Web-it-blog/18.12.16

Верстаем input file с умом

Недавно столкнулся с проблемой того, как правильно стилизовать <input type="file"> для загрузки файлов на сайт. Немного порыскав в интернете, я отметил самый, по моему мнению, эффективный способ это сделать и решил поделиться им с вами.

Все мы с вами знаем о тэге <label>, который при клике ссылается на связанный с ним <input>. И если наш <input> является файлом, то при нажатии открывается окно загрузки файла.

На примере ниже я продемонстрировал, как это выглядит:

<input type="file" name="file" id="file" class="file-input">
<label for="file">обзор</label>

В этом и заключается основной секрет, благодаря которому мы можем сверстать <input type="file">, чтобы он выглядел так, как мы этого желаем. Теперь приступим непосредственно к его верстке

Прячем input.

Для начала спрячем <input>, но не прибегая к display: none или visibility: hidden. Все дело в том, что если мы сделаем так, то наша форма не будет отправлена на сервер, так как input просто нет, т.е. как будто его и не было на странице. Чтобы этого избежать, мы пойдем на хитрость. Пропишем некоторые свойства в CSS, которые скроют его, но при этом он все еще будет виден браузером

Далее мы копируем код, который содержит путь до папки с node.js, и вставляем его в ваш редактор.

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

Если вы могли заметить, то width и height мы не приравниваем к 0, так как в некоторых браузерах <input> не будет виден, а этого нам с вами точно не нужно, поэтому для них мы пишем 0,1px.

Верстаем label.

Когда вы приступаете к верстке <label>, здесь включается все ваше воображение. В общем, используйте все ваши знания в CSS. Вот пример того как это можно реализовать

<label for="file">обзор</label>
	<span class="choose-file">Загрузить файл</span>
</label>
.file-input + label {
	font-size: 18px;
	color: #7D7C7C;
	display: inline-block;
	padding-right: 83px;
	cursor: pointer;
}

.choose-file {
	display: inline-block;
	position: relative;
	width: 135px;
	padding: 0 0 8px;
	border-bottom: 2px solid #e3e2e2;

.choose-file::after {
	content: "обзор";
	top: 0;
	width: -84px;
	left: 84px;
	height: 32px;
	line-height: 32px;
	font-family: "Cormorant Garamond", serif;
	text-align: center;
	color: #fff;
	background-color: #C9AC6F;
}

Ниже картинка, на которой представлен сверстанный <label>. Вот собственно и все. Мы с вами сделали красивый <input type="file"> и теперь вы знаете, как правильно его надо верстать