Как убрать стрелки в input type number

Убрать стрелочки с

фото

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

Отслеживать
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака
задан 23 июн 2015 в 15:13
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button < /* display: none;

Отслеживать
ответ дан 23 июн 2015 в 15:23
user31688 user31688

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

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

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

input[type='number']

Отслеживать
ответ дан 23 июн 2015 в 15:24
446 3 3 серебряных знака 9 9 бронзовых знаков

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

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

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

Убрать стрелки в input[type=»number»] с помощью CSS

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS:

/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button < -webkit-appearance: none; margin: 0; >/* Firefox */ input[type=number]

Важное дополнение: по прежнему можно менять числа в поле обычным скроллом мышки или стрелками на клавиатуре «Вверх-Вниз».

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(),…

Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить…

Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров,…

Number input: удаляем стрелки и блокируем изменение чисел с клавиатуры

И так, у нас есть поле типа number. Наша задача: блокировать изменение чисел в input при помощи скролла мыши и клавиш вверх, вниз на клавиатуре. А также спрятать стрелочки управления цифрами в самом поле.

Основная работа ляжет на js.

Блокируем скролл, когда курсор фокусируется на инпуте.
Восстанавливаем скроллинг при помощи мыши.
Блокируем клавиши 38,40. Которые собственно и отвечают за инкремент и декремент чисел в поле input.

jQuery скрипт:

CSS сниппет:

Просто прячем стрелочки.

Ferym26 / input-number-ff.scss

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// убирает стрелки в input[type=number] в FF

input [ type = number ] ::-webkit-outer-spin-button ,

input [ type = number ] ::-webkit-inner-spin-button

-webkit-appearance : none ;

margin : 0 ;

input [ type = number ]

-moz-appearance : textfield;

Footer

You can’t perform that action at this time.