Как стилизовать стрелочки на ‹input type=“number”›?

Question

[RimMirK]

надо убрать/изменить фон стрелочек

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	background: transparent;
}

не работает

Comments

[Ankhena]

План:
1. Убрать нативные.
2. Приделать свои.

[RimMirK]

Ankhena, это ясно, селектор какой? Нагуглить не получается

[Ankhena]

RimmaKur, "ок, гугл, input number убрать стрелки"
https://ru.stackoverflow.com/questions/431590/Убра...

[Александр]

Вот тебе пример:

Answer 1

[Sozdavan]

Вы можете использовать appearanceсвойство CSS, чтобы изменить внешний вид стрелок на inputэлементе с typeчислом. Следующий CSS должен изменить цвет фона стрелок на прозрачный:

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

Обратите внимание, что это будет работать только для браузеров webkit (Chrome и Safari), и вам может потребоваться использовать префиксы для других браузеров. Кроме того, вы можете использовать background-color: transparentвместо того -webkit-appearance: none;, чтобы изменить цвет фона на прозрачный.