Отключить кнопки прокрутки webkit на типе ввода = «число»?

203

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

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

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

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

css html webkit

— POJO
источник

15

Если вы предпочитаете использовать type="text"по другим причинам и переключаетесь только на номер для функции цифровой клавиатуры, вы можете использовать pattern="[0-9]*"эту функцию, чтобы сохранить ее type="text". См stackoverflow.com/questions/6171903/...

— joshuahedlund

114

Приведенный ниже 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;
}

— Ролвин Крэста
источник

8

лучшее решение , чем выше (более полный)

— АКМ

-moz-внешний вид: текстовое поле; дополнение было единственным ответом, который работал для меня. Спасибо!

— Нанориппер

283

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

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

Это исправило это:

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

— Боб Сприн
источник

Потрясающие. У меня была похожая проблема , но с немного другой стратегией CSS, которая приводила к совершенно новым проблемам ...

— Лукас Эдер

1

Кто-нибудь знает способ исправить поведение прокрутки, где вы можете прокручивать вверх и вниз бесконечно? Я установил min=0.01(и maxустановил произвольное значение) в своем элементе ввода, но я бы предпочел, чтобы колесо прокрутки просто перемещалось вверх и вниз по странице. Я использую AngularJS и ничего не могу найти.

— JaKXz

2

Ссылка на авторитетный источник для этой конкретной проблемы и такого рода информации: css-tricks.com/snippets/css/turn-off-number-input-spinners

— Джош Хабдас

1

чтобы быть понятным, это не удаляет функциональность прокрутки мыши!

— Бабалу

1

-moz-Appearance: текстовое поле для Firefox

— Кевин Сатл

16

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

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

— robertc
источник

@JethroLarson Что это не работает? Вы можете попробовать -webkit-outer-spin-buttonвместо этого.

— Робертc

это отлично работает для type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-Appearance: none; }

— углымунки

11

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

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

— Goulven
источник

4

@Knu Действительно, но здесь стоит упомянуть, потому что код в ответе не позволяет вводить данные в Opera.

— Гулвен

4

@Goulvench, пожалуйста, не надо :) Я нашел это очень полезным, кто-то еще может тоже.

— 2013 г.

-2

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

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

— Себастьян Варинуа
источник