Отключить кнопки прокрутки webkit на входе type = "number"?

Question

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

В Mobile Safari использование <input type="number"> прекрасно работает, потому что оно вызывает цифровую клавиатуру в полях ввода, которые должны содержать только цифры.1004 *

Однако в Chrome и Safari при использовании числовых входов в правой части поля отображаются кнопки прокрутки, что в моем дизайне выглядит как дерьмо.Мне действительно не нужны кнопки, потому что они бесполезны, когда вам все равно нужно написать что-то вроде 6-значного числа.

Можно ли отключить это с помощью -webkit-appearance или каким-то другим трюком CSS?Я пытался без особой удачи.

Answer 1

Я обнаружил, что есть вторая часть ответа на этот вопрос.

Первая часть помогла мне, но у меня все еще был пробел справа от моего type=number ввода Я обнулел поле на входе, но, видимо, мне пришлось обнулить поле и на счетчике.

Это исправлено:

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

Answer 2

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;
}

Answer 3

Не уверен, что это лучший способ сделать это, но из-за этого вращатели исчезают в Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Answer 4

Кажется невозможным предотвратить появление блесны в Opera. В качестве временного решения вы можете освободить место для прядильщиков. Насколько я могу судить, следующий CSS добавляет достаточно отступов, только в Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

Answer 5

Вы также можете скрыть счетчик следующим трюком:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}