Стилізація input file

Привіт шановні Новомосковсктелі блогу webcodius.ru! Однією з найскладніших завдань для верстальника є стилізація елементів форми так, як бачить їх дизайнер. Тим більше за замовчуванням такі поля як select, checkbox або file абсолютно відрізняються зовні в різних браузерах. У цій статті розглянемо способи стилізації поля для завантаження файлу. щоб воно однаково виглядало в більшості браузерів.

На мій погляд, найбільш оптимальним рішенням буде обернути поле input з типом file в тег label. Потім приховуємо поле input file. а при кліці по елементу label буде викликатися вікно вибору файлу.

Html - код вставки поля для завантаження файлу в цьому випадку буде таким:

Далі задаємо 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), так як вони в основному відповідають за зовнішній вигляд кнопки вибору файлу.

В результаті у вікні браузера ми бачимо стилізовану кнопку вибору файлу, при натисканні на яку з'являється вікно вибору файлу:

Для початку додамо в html-код додатковий елемент елемент div для виведення імені файлу, що і додамо обробник на подію onchange:

function getFileName () var file = document.getElementById ( 'uploaded-file'). value;
file = file.replace (/ \\ / g, «/»).split ( '/').pop ();
document.getElementById ( 'file-name'). innerHTML = 'Файл:' + file;
>

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