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

Question

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

183

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

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

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

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

pojo 20 окт. 2010, в 08:45

Источник

14

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

Теги:

css

html5

webkit

5 ответов

295

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

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

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

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

Bob Spryn 27 янв. 2011, в 04:54

0

Потрясающие. У меня была похожая проблема , но с немного другой стратегией CSS, которая привела к совершенно новым проблемам ...
Lukas Eder 22 авг. 2011, в 14:26
1

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

Это также, кажется, работает в Chrome.
Saustrup 26 июнь 2014, в 08:44
1

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

чтобы быть понятным, это не удаляет функциональность прокрутки мыши!
babalu 24 фев. 2015, в 17:00
0

не работает в FF 38.0.6 на ПК
H. Ferrence 11 июнь 2015, в 12:21
0

не работает на firefox 39.0
Jack 05 авг. 2015, в 06:56
0

Вы можете использовать display:none; , Также нет необходимости указывать margin:0 вообще, разработчики должны время от времени проверять вещи сами!
user257319 09 дек. 2015, в 17:41
0

-moz-Appearance: текстовое поле для Firefox
Kevin Suttle 11 июль 2016, в 16:53

Показать ещё 7 комментариев

15

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

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

robertc 20 окт. 2010, в 19:01

0

Выиграть. Большое спасибо!
Jethro Larson 19 нояб. 2010, в 20:12
2

Кажется, не работает все время.
Jethro Larson 19 нояб. 2010, в 21:57
0

@JethroLarson Что это не работает? -webkit-outer-spin-button вы можете попробовать -webkit-outer-spin-button .
robertc 20 нояб. 2010, в 02:35
0

это отлично работает для type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-Appearance: none; }
uglymunky 20 янв. 2011, в 05:42
0

-webkit-external-spin-button сделали свое дело
Jethro Larson 09 фев. 2011, в 00:06

Показать ещё 3 комментария

10

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

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

Goulven 23 май 2011, в 17:37

4

@Knu Действительно, но здесь стоит упомянуть, потому что код в ответе не позволяет вводить данные в Opera.
Goulven 24 май 2011, в 12:00
4

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

0

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

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

Sébastien Varinois 24 июль 2017, в 10:41

Ещё вопросы

Если вы предпочитаете использовать type="text" по другим причинам и переключаетесь только на цифры для числовой функции клавиатуры, вы можете использовать pattern="[0-9]*" чтобы получить функцию клавиатуры, позволяющую сохранить type="text" . См. Stackoverflow.com/questions/6171903/…
Потрясающие. У меня была похожая проблема , но с немного другой стратегией CSS, которая привела к совершенно новым проблемам ...
Кто-нибудь знает способ исправить поведение прокрутки, где вы можете прокручивать вверх и вниз бесконечно? Я установил min=0.01 (и max для некоторого произвольного значения) в моем элементе ввода, но я бы предпочел, чтобы колесо прокрутки просто перемещалось вверх и вниз по странице. Я использую AngularJS и ничего не могу найти.
Это также, кажется, работает в Chrome.
Ссылка на авторитетный источник для этой конкретной проблемы и такого рода информации: css-tricks.com/snippets/css/turn-off-number-input-spinners
чтобы быть понятным, это не удаляет функциональность прокрутки мыши!
Вы можете использовать display:none; , Также нет необходимости указывать margin:0 вообще, разработчики должны время от времени проверять вещи сами!
@JethroLarson Что это не работает? -webkit-outer-spin-button вы можете попробовать -webkit-outer-spin-button .
это отлично работает для type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-Appearance: none; }
-webkit-external-spin-button сделали свое дело
@Knu Действительно, но здесь стоит упомянуть, потому что код в ответе не позволяет вводить данные в Opera.
@Goulvench, пожалуйста, не надо :) Я нашел это очень полезным, кто-то еще может тоже.

Rolwin C · Accepted Answer · 2014-10-15T10-29-00.000Z

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

лучшее решение, чем указано выше (более полное)
Проголосовал и предложил отредактировать исходный ответ.
-moz-внешний вид: текстовое поле; дополнение было единственным ответом, который работал для меня. Спасибо!