Как изменить тип курсора в input type="file" в CSS

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

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

input[type="file"] { cursor: pointer; }

Этот код корректно отработает в большинстве современных браузеров: Firefox, Internet Explorer начиная с 7-й версии, а также в Chrome. Тем не менее, некоторые особенности имеют место, о которых мы поговорим далее.

Настройка курсора для разных браузеров

Обеспечение совместимости браузеров

Простая смена курсора может работать не во всех браузерах безукоризненно. Для обеспечения совместимости с Chrome, например, следует учесть особенности псевдо-элементов:

/* Для Chrome требуется особый подход */
::-webkit-file-upload-button {
  cursor: pointer;
}

Если вам всё ещё важно поддерживать IE6, то придётся обратиться к JavaScript, так как он не поддерживает cursor: pointer;.

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

Прятанье стандартного элемента ввода файла

Для большей кастомизации можно скрыть стандартный input и применить собственный элемент:

/* Приятный на ощупь файла-загрузчик */
.custom-file-upload {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

/* Стандартный input делаем невидимым */
.custom-file-upload input[type='file'] {
  opacity: 0;
  position: absolute;
  overflow: hidden;
  width: 0.1px; height: 0.1px;
  z-index: -1;
}

И ваш HTML будет выглядеть следующим образом:

<label class="custom-file-upload">
  <input type="file"/>
  Загрузить файл
</label>

Таким образом, вы получаете более дружелюбный к пользователю загрузчик файлов.

Пользовательский опыт играет роль!

Всем знакомый указатель-курсор являет собой ясный сигнал о кликабельности <input type="file">. Меняя лишь эту маленькую деталь, мы улучшаем удобство работы с интерфейсом.

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

Представьте, что стандартный курсор – это обычная отвертка (🔧). А мы его заменяем на точную отвертку (🔎).

Стандартный курсор на `<input type="file">`: 🔧
Желаемый курсор:                           🔎

И вот таким простым изменением CSS:

input[type="file"] {
  cursor: pointer;
}

мы достигаем почти инженерной точности интерфейса!

Создание собственной кнопки

Сформируйте эффектную кнопку загрузки файлов таким образом:

<label for="file-upload" class="custom-file-upload">
    <img src="button-image.png" style="cursor: pointer;"/> Загрузить файл
</label>
<input id="file-upload" type="file" style="display: none;"/>

Сочетание визуально привлекательной кнопки с скрытым input создает плавный и стильный пользовательский опыт.

Размышления о специфике браузеров

Политика браузеров

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

Спасение встроенными стилями

Если CSS-селекторы не работают так, как ожидается, можно применить стили непосредственно (inline):

<input type="file" style="cursor: pointer;"/>

Такой подход гарантирует применение стиля, однако потребует дополнительных затрат на поддержку и контроль специализированности.

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

1. Элементы формы · Bootstrap v5.0
2. Свойство cursor в CSS
3. Метод createObjectURL() – Веб-API | MDN
4. "css-cursor" | Can I use... Таблицы поддержки для HTML5, CSS3, и т.д.
5. События мыши
6. Элемент <input type="file"> – HTML: HyperText Markup Language | MDN
7. File API