Как стилизовать стрелки в <input type="number"> в CSS

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

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

/* Для Chrome и Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Для Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Для IE и Edge */
input[type="number"]::-ms-clear {
  display: none;
}

Настройте внешний вид этого поля следующими свойствами:

input[type="number"] {
  background-color: #f2f2f2;
  color: #333;
  font-family: sans-serif;
}

Тонкая стилизация кнопок увеличения и уменьшения значения в Chrome достигается путем:

/* Стилизация кнопки увеличения значения */
input[type="number"]::-webkit-inner-spin-button {
  background-color: blue;
}

/* Стилизация кнопки уменьшения значения */
input[type["number"]::-webkit-outer-spin-button {
  background-color: red;
}

Расширенные стили управляющих кнопок

Если хотите преобразовать кнопки управления, воспользуйтесь следующими подсказками:

Создание своих управляющих кнопок

Для создания собственных кнопок сначала нужно скрыть дефолтные:

/* Скрытие стандартных кнопок управления в Chrome */
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  height: 0;
  opacity: 0;
}

Теперь добавьте свои элементы управления:

.spinner-arrows {
  position: absolute;
  right: 5px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Пользовательская кнопка для увеличения значения */
.spinner-arrows .up {
  background-color: blue;
}

/* Пользовательская кнопка для уменьшения значения */
.spinner-arrows .down {
  background-color: red;
}

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

Универсальная стилизация кнопок управления

Кроссбраузерность — это всегда вызов, но он вполне выполним благодаря этим советам:

/* Для IE11 и более ранних версий */
input[type="number"] {
  -ms-appearance: textfield;
}

/* Для Edge, в нём отсутствуют псевдоэлементы для кнопок, следует прибегнуть к другим способам стилизации */

Обеспечение функциональности

Кнопки должны быть не только привлекательными, но и выполнять свою функцию:

.spinner-arrows div {
  pointer-events: none;
}

/* Разрешение событий клика мыши на активных элементах */
.spinner-arrows div * {
  pointer-events: auto;
}

Заметки по стилизации кнопок управления

Совместимость с браузерами

Достижение корректной работы в различных браузерах — это не просто задача, это испытание для вас.

Доступность

Не забывайте о доступности. Все контролы должны быть доступны для программ чтения с экрана.

Эстетическое единообразие

Следите за тем, чтобы внешний вид пользовательских кнопок сочетался с общим дизайном вашего сайта.

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

Стандартный и улучшенный вид числового поля ввода можно охарактеризовать следующим образом:

Стандартное представление:| 🚗 Поле ввода | Улучшенное представление: | 🚗🔳⚫🔄 Поле ввода |

Базовая настройка — это аналогия с перекрашиванием авто:

input[type="number"] {
  color: red;
  background: yellow;
}

Усовершенствование — как установка спортивных дисков и спойлера:

/* Для Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Для Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Как и в тюнинге машины, вы можете детально настроить каждый элемент внешнего вида вашего числового поля ввода.

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

1. <input>: Элемент ввода (формы) – HTML | MDN — Полное описание элемента <input> от Mozilla.
2. HTML input type="number" — Простые рекомендации по использованию и стилизации <input type='number'>.
3. Стилизация кроссбраузерных ползунков диапазона с помощью CSS | CSS-Tricks — Методики кроссбраузерной стилизации элементов ввода.
4. Spring binding exception when a form is submitted – Stack Overflow — Обсуждения и решения возникающих проблем со стилизацией type=number.
5. Стилизация веб-форм – Учимся веб-разработке | MDN — Руководство по созданию стилей для HTML-форм.
6. WebAIM: Создание доступных форм – Доступные элементы управления формами — Практики создания доступных форм.
7. Can I use... Support tables for HTML5, CSS3, etc. — Таблицы поддержки по <input type="number"> разными браузерами.