Убрать стрелочки с <input type=“number”>

#html #css #hover

Есть input с типом number и при наведении на него появляются такие стрелочки:






Можно ли как-то их убрать?
    

Ответы

Ответ 1

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}





Ответ тут.


Ответ 2

Не наблюдаю стрелки в IE. Код ниже прячет стрелки управления в браузерах, основанных
на webkit (Opera для проверки нет):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


Для Firefox попроще:

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


Ответ 3

Эти стрелки добавляют сам бреузер, но их можно убрать обычными стилями css.

Это для браузера Chrome:

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


Это для браузера Firefox:

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


Для других

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


Ответ 4

Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать,
применён уже не на одном реальном сайте есть на github
Плагин для стилизации  и на сайте http://number-plugin.ru

Для подключения плагина добавьте в 






Создайте элемент




И подключите скрипт

$(document).ready(function () {
  $('.numb').number_plugin();
});


Ответ 5

В англоязычном SO дан такой ответ - попробуйте добавить в .css такое:

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