Как убрать стрелки у input type=number: простые CSS решения

hannadev

Когда создаёшь форму с числовыми полями, стандартные стрелки увеличения и уменьшения значения в input type="number" часто выглядят неуместно. Они занимают место, нарушают дизайн и не всегда соответствуют стилю интерфейса. К счастью, избавиться от них проще, чем кажется.

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

Быстрый способ: стандартный CSS

Проще всего просто скрыть стрелки через несколько строк CSS. Браузеры используют разные механизмы для отображения этих элементов, поэтому нужно учитывать особенности каждого. WebKit-браузеры (Chrome, Safari, Opera) показывают стрелки через псевдоэлементы, которые можно целить с помощью селекторов ::-webkit-outer-spin-button и ::-webkit-inner-spin-button. Firefox применяет свой подход, используя свойство -moz-appearance.

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

input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Этот код работает следующим образом:

-moz-appearance: textfield трансформирует поле в обычное текстовое поле для Firefox
-webkit-appearance: none скрывает стрелки в WebKit-браузерах
margin: 0 убирает лишние отступы, которые могут остаться после удаления стрелок

Контроль видимости: когда стрелки видны только при фокусировке

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

Если хочешь, чтобы стрелки всегда были доступны пользователю, используй свойство opacity. Установи его в значение 1, и стрелки станут постоянно видны:

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

Это полезно, когда стрелки - важная часть интерфейса и должны быть всегда под рукой пользователя. Однако важный момент: с помощью CSS невозможно стилизировать сами стрелки (изменить цвет, размер, форму). Браузеры просто не предоставляют такого доступа. Если нужен полный контроль над внешним видом, придётся скрывать стандартные стрелки и создавать собственные кнопки.

Собственные кнопки управления значением

Когда стандартные стрелки не подходят ни по стилю, ни по функциональности, лучший вариант - создать свои. HTML5 предоставляет методы stepUp() и stepDown(), которые программно изменяют значение поля. Их можно привязать к любым кнопкам.

Сначала скрываем стандартные стрелки CSS, а затем создаём структуру с собственными кнопками:

<div class="number-input">
  <button class="number-minus" type="button">-</button>
  <input type="number" min="0" value="1" readonly>
  <button class="number-plus" type="button">+</button>
</div>

input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.number-minus, .number-plus {
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f5f5f5;
}

document.addEventListener('DOMContentLoaded', function() {
  var arrowUp = document.querySelector('.number-plus');
  var arrowDown = document.querySelector('.number-minus');
  var input = document.querySelector('input[type="number"]');

  arrowUp.addEventListener('click', function() {
    input.stepUp();
  });

  arrowDown.addEventListener('click', function() {
    input.stepDown();
  });
});

Этот подход даёт полную свободу в дизайне. Ты можешь:

Использовать иконки вместо текста
Применить любые стили (цвет, размер, шрифт)
Добавить анимации и эффекты при клике
Управлять шагом изменения через атрибут step
Отключать кнопки при достижении минимума или максимума

Блокировка скролла и клавиш

Если убрал стрелки, но забудешь про скролл колёсика мыши и клавиши стрелок на клавиатуре, пользователь всё равно сможет менять значение. В некоторых случаях это нежелательно - например, если поле только для отображения информации. Вот как это блокировать:

var input = document.querySelector('input[type="number"]');

// Блокируем скролл
input.addEventListener('wheel', function(e) {
  e.preventDefault();
});

// Блокируем клавиши стрелок (38 - вверх, 40 - вниз)
input.addEventListener('keydown', function(e) {
  if (e.keyCode === 38 || e.keyCode === 40) {
    e.preventDefault();
  }
});

// Восстанавливаем скролл при клике мышью вне поля
document.addEventListener('wheel', function(e) {
  // Скролл работает везде кроме focused input
});

Важно помнить: полная блокировка взаимодействия может вызвать раздражение у пользователей. Лучше всегда предоставлять альтернативные способы ввода - либо через кастомные кнопки, либо позволяя печатать значения прямо в поле.

Сравнение подходов

Подход	Плюсы	Минусы	Когда использовать
Скрытие стрелок CSS	Просто, кроссбраузерно, минимум кода	Нет контроля над стилем стрелок	Когда стрелки просто мешают дизайну
Собственные кнопки	Полный контроль над внешним видом и поведением	Нужен JavaScript, больше кода	Когда нужен кастомный дизайн или особая логика
Блокировка скролла	Защита от случайных изменений	Может затруднить доступность	Для критичных полей ввода
Скрытие + readonly	Полная защита значения	Пользователь не может ничего менять	Для поля, только для чтения

Особенности в разных браузерах

Хотя CSS решение работает в большинстве браузеров, есть несколько нюансов. Chrome, Edge и Opera хорошо поддерживают оба подхода - и скрытие стрелок, и кастомные кнопки. Safari обычно ведёт себя как Chrome, но иногда может игнорировать некоторые стили. Firefox требует именно свойства -moz-appearance: textfield, чтобы трансформировать поле. Internet Explorer 11 вообще не поддерживает input type="number" в полной мере, поэтому там можно использовать graceful degradation.

Если тестируешь в нескольких браузерах и видишь, что стрелки не скрываются, проверь:

Правильность селектора (должно быть input[type="number"], а не просто input)
Наличие обоих вариантов CSS (для Firefox и WebKit)
Что стили не переопределяются где-нибудь ещё в коде
Кэш браузера (иногда помогает очистка)

Итоговое решение для большинства случаев

Для быстрого внедрения в проект используй этот набор CSS и JavaScript. Он охватывает основные сценарии и работает предсказуемо:

/* Скрываем стрелки */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Опционально: убираем скролл */
input[type="number"] {
  margin: 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

// Блокируем скролл (опционально)
document.querySelectorAll('input[type="number"]').forEach(input => {
  input.addEventListener('wheel', e => e.preventDefault());
});

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

Что стоит помнить при реализации

Убирая стрелки, легко забыть о важных деталях. Во-первых, всегда проверяй на мобильных устройствах - там поведение может быть другим. На мобилках часто появляется цифровая клавиатура вместо стрелок, и твои CSS решения это не изменят. Во-вторых, обрати внимание на доступность - если убираешь встроенные элементы управления, убедись, что пользователь с экранными читателями может понять, как вводить значение. В-третьих, не забывай про валидацию - input type="number" автоматически проверяет, что это число, но если добавляешь кастомные кнопки, проверь, что они тоже соблюдают ограничения min и max. Наконец, тестируй в разных браузерах и версиях - даже популярные браузеры иногда по-разному интерпретируют один и тот же CSS.