input[type=’number’]
Не знаю, почему, но стрелки увеличения/уменьшения значения в поле с типом number на англоязычном stackoverflow называются spinner.
Тем не менее, по работе появилась хотелочка убрать стрелки с полей с типом number с десктопа и показывать цифровую клавиатуру на телефонах.
Начнем с десктопа. Здесь уберем стрелки для всех возможных браузеров:
Теперь интересное: по дефолту на мобильных устройствах при выставлении у input типа number на Android’e появляется цифровая клавиатура, а на iOS — нет. Решаем это таким образом:
How TO — Hide Arrows From Input Number
Learn how to remove arrows/spinners from input type number with CSS.
Try to hover over both number inputs to see the difference:
Notes on functionality: It is still possible to increment the number when you scroll inside the number input.
Remove Arrows/Spinners
Example
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button <
-webkit-appearance: none;
margin: 0;
>
/* Firefox */
input[type=number] <
-moz-appearance: textfield;
>
Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.
Tip: Go to our HTML input type=»number» reference to learn more about inputs with type=»number».
COLOR PICKER
Get certified
by completing
a course today!
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Убрать стрелочки с <input type="number">
Есть input с типом number и при наведении на него появляются такие стрелочки:
Можно ли как-то их убрать?
Не наблюдаю стрелки в IE. Код ниже прячет стрелки управления в браузерах, основанных на webkit (Opera для проверки нет):
Для Firefox попроще:
Не понимаю зачем тут все приводят одинаковые ответы, некоторые при этом походу даже не проверяют написанное. Для хрома каждый не поленился написать, а вот стандартное свойство из, собственно, стандарта, вообще никто даже не упомянул.
В общем, итак. Итоговый 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:
How to Hide the HTML5 Number Input’s Arrow Buttons
If you want to hide arrow buttons of the HTML <input> element with the “number” type, you need to use CSS.
As there is no longer a problem in Chrome, you can only set the display property to “none” to hide the arrow buttons.
Example of hiding the arrow button with the CSS display property:
There is another method using the appearance property.
Example of hiding the arrow button with the CSS appearance property:
In Firefox versions, the default value of the -moz-appearance property on these elements is number-input . Changing it to the value textfield removes the spinner.
And if you want the spinner to be hidden initially, and then appear on hover or focus.
Example of hiding the arrow button from the number input:
The display and appearance properties
The display property defines the type of the box used for an HTML element. The none value specifies that the element should not be displayed at all.
The appearance property displays an element using a platform-native styling based on the users’ operating system’s theme. The -moz-appearance property is used in Firefox. The -webkit-appearance property is designed to work on browsers powered by the WebKit, such as Safari and Chrome.