Есть ли согласованный способ в разных браузерах скрывать новые спин-боксы, которые некоторые браузеры (например, Chrome) отображают для ввода HTML с типом number? Я ищу метод CSS или JavaScript для предотвращения появления стрелок вверх / вниз.
<input id="test" type="number">
<input type="number" min="4" max="8" />
в Chrome и вижу типичное поле ввода со стрелками вверх и вниз на стороне.<input type="number" pattern="[0-9]*" inputmode="numeric">
. Дополнительная информация: stackoverflow.com/a/31619311/806956<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... >
с jQuery Validati или аналогичной ей для обработки валидации. Я не проверял этот подход, поэтому это комментарий, а не ответ.Ответы:
Этот CSS эффективно скрывает кнопку прокрутки для браузеров webkit (протестировал ее в Chrome 7.0.517.44 и Safari версии 5.0.2 (6533.18.5)):
Вы всегда можете использовать инспектор (webkit, возможно, Firebug для Firefox) для поиска подходящих CSS-свойств для интересующих вас элементов, поиска псевдо-элементов. Это изображение показывает результаты для элемента ввода type = "number":
источник
display: none;
как единственное в селектореtype=number
если вам нужно скрыть эти стрелки. Например, в настоящее время они будут по-прежнему отображаться в Opera, и они начнут отображаться в Firefox, IE и т. Д., Когда они реализуют этот тип ввода.max=
иmin=
атрибуты<input>
так альтернативных решений , таких , какtype="text"
не являются действительными HTML5. Люди также упоминают Opera, включая эти счетчики. Есть ли решение для Opera, похожее на Safari / Chrome?input::-webkit-clear-button
для кнопки XВ Firefox 29 в настоящее время добавлена поддержка числовых элементов, поэтому ниже приведен фрагмент для сокрытия счетчиков в браузерах на основе webkit и moz:
источник
Короткий ответ:
Более длинный ответ:
Добавить к существующему ответу ...
Fire Fox:
В текущих версиях Firefox (
-moz-appearance
свойство агента пользователя) значение по умолчанию для этих элементов равноnumber-input
. Изменение этого значенияtextfield
эффективно удаляет счетчик.В некоторых случаях вы можете захотеть сначала прятать счетчик , а затем отображать его при наведении / фокусировке. (В настоящее время это поведение по умолчанию в Chrome). Если это так, вы можете использовать следующее:
Хром:
В текущих версиях Chrome значение (пользовательский агент) по умолчанию для
-webkit-appearance
свойства этих элементов уже установленоtextfield
. Для того , чтобы удалить вертушку, на-webkit-appearance
потребности стоимости имущества, чтобы быть измененnone
на::-webkit-outer-spin-button
/::-webkit-inner-spin-button
псевдо - классы (это-webkit-appearance: inner-spin-button
по умолчанию).Стоит отметить, что
margin: 0
используется для удаления маржи в старших версиях Chrome.В настоящий момент, на момент написания этой статьи, здесь используется стили пользовательского агента по умолчанию для псевдокласса inner-spin-button:
источник
Согласно руководству по кодированию для пользователей Apple Safari для мобильных устройств , для отображения цифровой клавиатуры в браузере iPhone можно использовать следующее:
А
pattern
из\d*
также будет работать.источник
Попробуйте использовать
input type="tel"
вместо этого. Появляется клавиатура с цифрами, и на ней не отображаются спин-боксы. Он не требует JavaScript, CSS, плагинов или чего-либо еще.источник
type=number
делает.Только добавить этот CSS, чтобы удалить счетчик на вводе числа
источник
input[type=number]{ -webkit-appearance }
должно быть достаточно для Chrome, но, конечно, вам также необходимо изменить псевдоэлементы . есть идеи почему ??Я столкнулся с этой проблемой
input[type="datetime-local"]
, которая похожа на эту проблему.И я нашел способ преодолеть такие проблемы.
Во-первых, вы должны включить функцию теневого корня Chrome с помощью «DevTools -> Настройки -> Общие -> Элементы -> Показать теневой DOM агента пользователя»
Тогда вы можете увидеть все затененные элементы DOM , например, для
<input type="number">
полного элемента с затененным DOM:И в соответствии с этой информацией, вы можете создать некоторый CSS, чтобы скрыть ненужные элементы, как сказал @Josh.
источник
Не то, что вы просили, но я делаю это из-за ошибки фокуса в WebKit со спинбоксами:
Это может дать вам идею помочь с тем, что вам нужно.
источник
Это более лучший ответ, который я хотел бы предложить при наведении мыши и без мыши
источник
margin: 0
достигается? Кроме того,spin-button
кажется, что псевдоэлементы не запускаютсяhover
в новых браузерах?Чтобы сделать это в Safari, я обнаружил, что добавление! Важно к настройке веб-набора заставляет кнопку прокрутки быть скрытой.
У меня все еще есть проблемы с разработкой решения для Opera.
источник
На Firefox для Ubuntu, просто используя
сделал трюк для меня.
Добавление
Приведет меня к
каждый раз, когда я пытался То же самое для внутренней кнопки вращения.
источник
-webkit-*
для Chrome,-moz-*
для Mozilla Firefox. Вот почему это не сработало для вас.источник
Возможно, измените ввод числа с помощью javascript на ввод текста, когда вам не нужен спиннер;
и прекратить ввод текста пользователем;
затем сделайте так, чтобы javascript изменил его обратно на тот случай, если вам нужен спиннер;
это хорошо сработало для моих целей
источник
В браузерах на основе WebKit и Blink и All Kind Of Browser используется следующий CSS:
источник
webkit
? При ответе на вопрос девятилетней давности с четырнадцатью существующими ответами важно добавить объяснение того, как и почему работает ваш ответ, и указать, на какой новый аспект вопроса он отвечает.Мне нужно было это работать
Дополнительная линия
appearance: none
была ключевой для меня.источник
Я нашел супер простое решение, используя
Это поддерживается большинством браузеров: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
источник