5512
- 0
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет. Сегодня затронем тему как сделать красивую кнопку загрузки файлов.Ну обычными способами оформить кнопки выбора файла нельзя,но есть небольшой приёмчик,которым мы воспользуемся.
И так приступим.
У нас есть поле
Код:
<input type="file" name="file" />
Далее добавляем label, это нам понадобится для оформления.
Вот так должно получится
Код:
<input type="file" name="file" />
<label for="file">Выберите файл</label>
1.Скрываем поле file:
Код:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}И так у нас на странице остался только label, Вот его и будем оформлять.
2.Добавляем стилей для label
Код:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
cursor: pointer;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
}Элемент label не выделяется клавиатурой tab, сделаем так, чтобы его можно было выделять посредством клавиатуры, таким же образом, как это можно сделать для стандартных полей ввода.
Код:
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}Подготовим скрытое поле, для работы с ним:
Код:
<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;
});
});
Редко, но случается, что в браузере может быть выключен код javascript, что делать в этом случае? Ничего не остается, кроме того, чтобы вернуть видимость скрытому полю выбора файла.
Код:
<html class="no-js">
<head>
<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 .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.no-js .inputfile + label {
display: none;
}Можешь почитать и вот эту статейку "Таблица цветов"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.