- 168
- 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;
}Можешь почитать и вот эту статейку "Теги figure"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
