Как изменить тип курсора в 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;"/>
Такой подход гарантирует применение стиля, однако потребует дополнительных затрат на поддержку и контроль специализированности.