Input file стилізація

Є купа способів змінити стандартне оформлення Input File. але на жаль, багато хто з них виявляються занадто громіздкими і часто не кросбраузерності.

Тому я вирішив поділитися з вами, найбільш оптимальним рішенням.

Головна його ідея полягає в тому, щоб обернути реальний Input File в тег label. потім ми просто приховуємо реальний Input File. ну а label по суті буде тією самою клікабельно областю, клікнувши по якій у нас буде з'являтися діалогове вікно, з пропозицією вибрати файл на своєму комп'ютері.

Таким чином, приховавши реальний Input File, ми можемо перетворити label в якусь кнопку вибору файлу.

Як бачите, все дуже просто.

Ну а тепер давайте приступимо до реалізації нашої ідеї.

Як завжди почнемо з HTML структури:

Нам необхідно, той текст, який ми хочемо виводити на кнопці вибору файлу, помістити в тег span. а далі все це обов'язково обернути в тег label і потім ще і в div з класом file-upload.

Після, напишемо трохи стилів

Тепер якщо ми подивимося на наш результат, то побачимо, що за фактом, вже все працює, кнопка має інший вигляд і при цьому ми спокійно можемо вибрати файл на своєму комп'ютері.

Тільки є одна проблема, якщо ви виберете файл, то візуально це ніяк не відобразиться. Що в свою чергу, може поставити користувача сайту в ступор.

Адже, якщо ви виберете файл з використанням стандартного Input File. то поруч з даними інпут, буде виведений шлях, до обраного файлу, але так як ми з вами приховали справжній Input File. то зараз ми нічого не побачимо.

Тому наше завдання зробити так, щоб при виборі файлу, шлях який міститься в прихованому Input File, дублювався в якесь місце.

Для цих цілей, я пропоную поряд з нашою кнопкою вибору файлу, створити ще і якесь текстове поле, куди ми якраз і будемо виводити шлях до обраного файлу. Зрозуміло, для реалізації цього механізму, нам вже потрібно використовувати JS.

Давайте зараз всі реалізуємо.

Для цього, до нашої HTML структурі, додамо просте текстове поле.

Звертаю вашу увагу, що у поля є атрибут disabled. він потрібен для того, щоб сам відвідувач не зміг змінювати значення даного поля.

Також додамо трохи стилів для нашого поля:

Ну сам JS (я для цих цілей написав невеличкий скрипт на jQuery), який буде займатися дублювання шляху з Input File в тільки що доданий текстове поле.

Примітка: за фактом, дані скрипт дублює не повний шлях до файлу, а тільки лише безпосередньо сама назва файлу.

Тепер у нас після вибору файлу, в доданий поле введення, буде підставлятися назву обраного файлу. Тим самим, користувач вже буде бачити, що файл був прикріплений.

На це власне все, ми як завжди впоралися з необхідною завданням.

Що стосується кросбраузерності, то даний спосіб працює в IE9 +, Chrome, Firefox, Mozilla, Opera, Safari.