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


203

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

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

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

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


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.01maxустановил произвольное значение) в своем элементе ввода, но я бы предпочел, чтобы колесо прокрутки просто перемещалось вверх и вниз по странице. Я использую 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;
}

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

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;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.