Как скрыть стрелки управления числового ввода в HTML5

В современных браузерах, таких как Chrome, элементы формы для числового ввода (<input type="number">) по умолчанию отображаются с небольшими стрелками вверх и вниз — спинбоксом. Эти стрелки позволяют увеличивать или уменьшать значение в поле ввода.

<input type="number" value="10">

Но что если в каких-то ситуациях эти стрелки не нужны или просто мешают дизайну? Как их можно скрыть?

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

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

Этот код убирает стрелки управления в браузерах, основанных на движке Webkit (например, Chrome и Safari).

Однако, в Firefox свойство -webkit-appearance не работает. Для этого браузера нужно использовать свойство moz-appearance.

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

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