16

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

<input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4">

фото

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

6 ответов 6

25

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 */
}
<input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4" />

Ответ тут.

9

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

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

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

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

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

В общем, итак... Итоговый CSS-код, чтобы гарантированно убрать чёртовы стрелочки на всех браузерах:

ENGLISH PLEASE:

I don’t understand why everyone gives the same answers here, some times don’t even check what write... For chrome, everyone was not too lazy to write, but no one even mentioned the standard property from the standard. Anyway, so ... The final CSS code to ensure that the damn arrows are removed on all browsers:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; // Yeah, yeah everybody write about it
}

input[type='number'],
input[type="number"]:hover,
input[type="number"]:focus {
    appearance: none;
    -moz-appearance: textfield;
}
1
  • 1
    Этот ответ должен быть помечен как "правильный ответ" ! 10 сен 2021 в 6:41
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;
}
2

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="number_plugin/number_plugin.js" type="text/javascript"> </script>
<link href="number_plugin/number_plugin.css" type="text/css" rel="stylesheet">

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

<input type="number" class="numb" id="1" value="1">

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

$(document).ready(function () {
  $('.numb').number_plugin();
});
2
  • И как это относится к вопросу?
    – Qwertiy
    10 сен 2019 в 9:04
  • Тем что с помощью этого плагина можно не только убрать стрелочки но и ещё полностью кастомизировать их и само поле ввода 10 сен 2019 в 9:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.