Css input number скрыть стрелки

How to Hide the HTML5 Number Input’s Arrow Buttons

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:

html> html> head> style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button < display: none; > style> head> body> input type="number" /> body> html>

There is another method using the appearance property.

Example of hiding the arrow button with the CSS appearance property:

html> html> head> style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button < -webkit-appearance: none; margin: 0; > input[type=number] < -moz-appearance: textfield; /* Firefox */ > style> head> body> input type="number" /> body> html>

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:

html> html> head> style> input[type="number"] < -moz-appearance: textfield; >input[type="number"]:hover, input[type="number"]:focus style> head> body> input type="number" /> body> html>

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.

Источник

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

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

В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут	Описание
step	Шаг изменения значения
max	Максимальное значение
min	Минимальное значение
placeholder	Подсказка
readonly	Только для чтения
disabled	Заблокирован
list	Связка со списком опций datalist по id
required	Обязательный для заполнения

Шаг изменения

Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

Пример:

Минимальное значение

Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.

Пример:

Максимальное значение

Атрибут max=»100″ задает максимально возможное значение value .

Пример:

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .

Пример:

Валидация

Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .

Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.

Пример:

Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.

input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after

Источник

Css input number скрыть стрелки

There is a big question web developers often ask and search for when using an HTML input type number.

How To Remove Arrows on a Number Input?

There are two methods for removing arrows from an HTML input type number. The first method uses a -webkit-inner-spin-button and -webkit-outer-spin-button selector, while a second method uses an HTML inputmode attribute.

As in the image below, let’s explore these two methods to achieve an input without arrows.

Using WebKit Properties

First, we create an HTML input with an attribute type of “number”. These input fields are typically used in a form. By using the type attribute, it defines a number picker element as an HTML numeric input field.

As you see below, the HTML code for a number picker is small and straightforward.

Secondly, we need to add some CSS styles to remove the appearance of arrow buttons. This can be achieved by using some WebKit CSS pseudo-elements selectors, for example, ::-webkit-inner-spin-button and ::-webkit-outer-spin-button . These pseudo-elements select the arrows on an input. The pseudo-elements must be used in conjunction with a CSS element selector input[type=number] . The full string would look something like this… input[type=number]::-webkit-inner-spin-button .

Last, we use a CSS appearance property and the WebKit version and set a value of “none”. These properties effectively hide the arrow buttons on a number picker. In a short summary, the arrows can be hidden with CSS styles, and no JavaScript is needed.

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

Using an inputmode Attribute

The second method involves using an inputmode=»numeric» attribute and changing a number input to type=»text» .

Note: It’s essential to understand that using an inputmode attribute doesn’t force form validity on user input. Form validity should be performed using JavaScript or choosing an appropriate data type that conforms to the particular user input, such as .

An inputmode attribute tells a browser or app what kind of mechanism should be used to help a user enter content. For example, when using an inputmode=»numeric» , the user agent should display a number keypad if a user is entering a numeric data type.

Let’s demonstrate the type»text» method and the inputmode attribute written in HTML.

Extended Example

References

Similar Articles

Источник

Turn Off Number Input Spinners

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

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

Note that some other functionality still exists, like being able to increment the number via the scroll wheel on a mouse. David blogged another method in June 2021:

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

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Anyone have any idea of how to add styles to the spin buttons besides turning them off? I have a taller-than-default text box and I’d like to make the spinners a little bigger and easier to click…

Yes, where margin:0 is, you should be able to just style the element from there. I am looking to find the documentation on this element. I want to turn the spinners on in mobile.

Can we stop modifying values when we keep mouse cursor on focused element and scroll mouse wheel ? If yes, please provide solution.

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

I found that increasing line-height value makes the arrow buttons larger, while simply height attribute keeps the box itself the desired size:

You can also style the buttons to your liking, by using :before and :after Here’s a very simple example and a fiddle (also includes a styled search input)

input[type=number]::-webkit-inner-spin-button < -webkit-appearance: none; cursor:pointer; display:block; width:8px; color: #333; text-align:center; position:relative; >input[type=number]::-webkit-inner-spin-button:before, input[type=number]::-webkit-inner-spin-button:after < content: "^"; position:absolute; right: 0; font-family:monospace; line-height: >input[type=number]::-webkit-inner-spin-button:before < top:0px; >input[type=number]::-webkit-inner-spin-button:after

This stopped working in Chrome a while ago. It seems you are no longer able to add pseudo elements to those selectors, which is a shame, since there’s only 1 selector for both up and down button

$(':input[type=number]').on('mousewheel', function(e)< $(this).blur(); >); 

Источник