Стилизация кнопки загрузки файлов в HTML и CSS

Быстрый ответ

Добиться простой и эффективной стилизации файла input[type="file"] можно, обернув его в тег label. Непосредственно input можно скрыть с помощью CSS и оформить label так, чтобы он выглядел как кнопка.

<style>
  /* Стилизация input файла */
  .custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Придаём input файлу облик обычной кнопки */
  }
</style>

<!-- Скрываем input для загрузки файла -->
<input type="file" id="file-upload" style="display: none;" />
<!-- Формируем вид кнопки для загрузки файла -->
<label for="file-upload" class="custom-file-upload">Выбрать файл</label>

<script>
  /* Добавляем функциональность */
  document.querySelector('.custom-file-upload').onclick = function () {
    /* Производим клик на скрытый input */
    document.getElementById('file-upload').click();
  };
</script>

Сохранение совместимости с браузерами и взаимодействия с пользователем

Борьба за совместимость браузеров все еще актуальна! Предложенный метод позволяет достичь единого стиля отображения и улучшить пользовательский опыт в любом браузере.

Можно использовать псевдоэлементы CSS, такие как ::file-selector-button, для прямого стилизирования кнопки в современных браузерах.

Для усовершенствования взаимодействия с пользователем рекомендуется использовать JavaScript для изменения текста на label в соответствии с именем выбранного файла.

/* Отслеживаем выбор файла */
const fileInput = document.getElementById('file-upload');
const fileLabel = document.querySelector('.custom-file-upload');

fileInput.onchange = () => {
  /* Показываем название выбранного файла */
  fileLabel.textContent = fileInput.files.length ? fileInput.files[0].name : 'Выбрать файл';
};

Чтобы сделать взаимодействие с кнопкой плавней, добавьте стили для эффектов наведения и переходов.

/* Кнопка приобретает изысканный вид при наведении */
.custom-file-upload:hover {
  background-color: #e8e8e8;
  transition: background-color 0.2s;
}

Благодаря JavaScript и event.preventDefault() возможно контролировать отправку формы. Это важно в случае необходимости проверки данных перед их отправкой на сервер.

document.querySelector('form').onsubmit = (event) => {
  /* Останавливаем отправку формы */
  event.preventDefault();

  /* Здесь проводим необходимые проверки перед отправкой */
};

Продвинутые советы по стилизации и обеспечению доступности

Регулирование размера поля ввода

Чтобы управлять шириной поля для загрузки файла, используйте атрибут size, который устанавливает её размер в зависимости от количества символов.

<input type="file" id="file-upload" style="display: none;" size="0" />

Подробнее об этом расскажет наш спикер на видео

Обеспечение доступности

Для доступности применяйте атрибуты ARIA или другие методы, позволяющие утилитам для чтения с экрана опознавать поле ввода.

/* Сделаем input типа file невидимым для глаз, оставив его доступным для скринридеров */
input[type="file"] {
  opacity: 0.01;
  position: absolute;
  left: -999em;
}

Учет особенностей браузеров

Помните, что разные браузеры могут по-разному интерпретировать стили. Возможно, вам потребуется учитывать браузер-специфичные псевдоэлементы, такие как ::-webkit-file-upload-button. Тестирование в различных браузерах обязательно.

Валидация и скрытые поля ввода

Инструменты валидации могут игнорировать поля, скрытые с помощью display: none. Для проверки таких полей используйте JavaScript или другие методы CSS, which do not hide fields for validation. которые не скрывают поля для валидации.

Визуализация

Превращение обычной кнопки выбора файла в идеальную начинается с простого дизайна и постепенно меняется благодаря добавлению новых функций и стилей, превращаясь в красивый и функциональный элемент интерфейса:

Кнопка выбора файла: 🔲

| Стадия трансформации | Визуализация |
| --------------------- | ------------ |
| Начальная (простая)      | 🔲        |
| Добавляем базовые стили | 🟥         |
| Добавляем эффекты наведения | 🟧     |
| Добавляем переходы     | 🟨         |
| Завершенная (стилизованная)  | ✨🔳💃  |

Полезные материалы

1. Стилизация кнопки input type="file" – Stack Overflow — ✔ Практические решения от сообщества программистов по стилизации полей для файлов.
2. Учебник от DigitalOcean — Шаг-за-шагом руководство по созданию пользовательского поля для ввода файла с использованием jQuery.
3. HTML: HyperText Markup Language | MDN — Официальная документация Mozilla с рекомендациями по стилизации пользовательского поля ввода файла.