У меня есть сайт, который в основном предназначен для мобильных пользователей, но и для рабочего стола.
В Mobile Safari использование <input type="number"> отлично работает, потому что оно вызывает цифровую клавиатуру на входных полях, которые должны содержать только цифры.
В Chrome и Safari, однако, с помощью цифровых входов отображаются кнопки со стрелками в правой части поля, которые выглядят как дерьмо в моем дизайне. Мне действительно не нужны кнопки, потому что они бесполезны, когда вам все равно нужно писать что-то вроде 6-значного номера.
Можно ли отключить это с помощью -webkit-appearance или другого трюка CSS? Я пробовал без большой удачи.
Ниже css работает как для Chrome, так и для Firefox
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;
}
Я обнаружил, что есть вторая часть ответа на этот вопрос.
Первая часть помогла мне, но у меня все еще было право на право ввода type=number. Я отключил маржу на входе, но, видимо, мне также пришлось обнулить маржу на счетчике.
Это зафиксировало это:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Не уверен, что это лучший способ сделать это, но это приводит к тому, что прядильщики исчезают в Chrome 8.0.552.5 dev:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Кажется невозможным запретить появляться в Opera Opera. В качестве временного обходного пути вы можете освободить место для прядильщиков. Насколько я могу судить, следующий CSS добавляет достаточно заполнения, только в Opera:
noindex:-o-prefocus,
input[type=number] {
padding-right: 1.2em;
}
Вы также можете скрыть счетчик с помощью следующего трюка:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity:0;
pointer-events:none;
}