Отключить кнопки запуска webkit для ввода типа = "число"?

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

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

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

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

Ответ 1

Ниже 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;
}

Ответ 2

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

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

Это зафиксировало это:

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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