Есть ли постоянный способ в браузерах скрыть новые спиновые окна, которые некоторые браузеры (например, Chrome) отображают для ввода HTML номера типа? Я ищу метод CSS или JavaScript, чтобы предотвратить появление стрелок вверх/вниз.
<input id="test" type="number">
Этот CSS эффективно скрывает кнопку прокрутки для браузеров webkit (протестировал ее в Chrome 7.0.517.44 и Safari версии 5.0.2 (6533.18.5)):
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it hidden */
}
Вы всегда можете использовать инспектор (webkit, возможно, Firebug для Firefox) для поиска подходящих CSS-свойств для интересующих вас элементов, поиска псевдо-элементов. Это изображение показывает результаты для элемента ввода type = "number":
display: none;
как единственная вещь внутри селектора
type=number
если вам нужно скрыть эти стрелки. Например, в настоящее время они будут по-прежнему отображаться в Opera, и они начнут отображаться в Firefox, IE и т. Д., Когда они реализуют этот тип ввода.
В Firefox 29 в настоящее время добавлена поддержка числовых элементов, поэтому здесь приведен фрагмент для сокрытия счетчиков в браузерах на основе webkit и moz:
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input id="test" type="number">
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;
}
<input type="number" />
Чтобы добавить к существующему ответу...
В текущих версиях Firefox значение по умолчанию для -moz-appearance
(пользовательский агент) для этих элементов number-input
. Изменение этого значения textfield
эффективно удаляет счетчик.
input[type="number"] {
-moz-appearance: textfield;
}
В некоторых случаях вам может потребоваться, чтобы прядильщик был скрыт изначально, а затем появился при наведении/фокусировке. (В настоящее время это поведение по умолчанию в Chrome). Если это так, вы можете использовать следующее:
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
<input type="number"/>
В текущих версиях Chrome значение по умолчанию (пользовательский агент) свойства -webkit-appearance
для этих элементов уже textfield
. Чтобы удалить счетчик, значение свойства -webkit-appearance
должно быть изменено на none
на псевдо-классах ::-webkit-outer-spin-button
/::-webkit-inner-spin-button
(по умолчанию это -webkit-appearance: inner-spin-button
).
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<input type="number" />
Стоит отметить, что margin: 0
используется для удаления поля в старых версиях Chrome.
В настоящее время, начиная с написания этого, здесь используется стиль пользовательского агента по умолчанию для псевдо-класса "внутренний-spin-button":
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: 0 0 auto;
align-self: stretch;
-webkit-user-select: none;
opacity: 0;
pointer-events: none;
-webkit-user-modify: read-only;
}
Согласно Руководство по кодированию пользовательских интерфейсов для мобильных устройств Safari, вы можете использовать следующее для отображения числовой клавиатуры в браузере iPhone:
<input type="text" pattern="[0-9]*" />
A pattern
of \d*
также будет работать.
Попробуйте вместо этого использовать input type="tel"
. Появляется клавиатура с цифрами, и на ней не отображаются спин-боксы. Он не требует JavaScript, CSS, плагинов или чего-либо еще.
type=number
.
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
//Supports Mozilla
input[type=number] {
-moz-appearance:textfield;
}
<input type="number"/>
Я столкнулся с этой проблемой с input[type="datetime-local"]
, которая похожа на эту проблему.
И я нашел способ преодолеть такие проблемы.
Во-первых, вы должны включить функцию chrome shadow-root с помощью "DevTools → Настройки → Общие → Элементы → Показать тендер пользователя DOM"
Затем вы можете увидеть все скрытые элементы DOM, например, для <input type="number">
, полный элемент с затененным DOM:
<input type="number">
<div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
<div id="editing-view-port">
<div id="inner-editor"></div>
</div>
<div pseudo="-webkit-inner-spin-button" id="spin"></div>
</div>
</input>
И в соответствии с этой информацией вы можете создать CSS-код, чтобы скрыть нежелательные элементы, так же, как @Josh сказал.
Только добавить этот CSS, чтобы удалить счетчик на вводе числа
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
<input id="test" type="number">
Не то, что вы просили, но я делаю это из-за фокуса в WebKit со спинбоксами:
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
Это может дать вам идею помочь с тем, что вам нужно.
Это лучший ответ, который я хотел бы предложить на мыши и без мыши над
input[type='number'] {
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button,
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
В Firefox для Ubuntu, просто используя
input[type='number'] {
-moz-appearance:textfield;
}
сделал трюк для меня.
Добавление
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Приведет меня к
Неизвестный псевдокласс или псевдоэлемент '-webkit-external-spin-button. Правила отключены из-за плохого выбора.
каждый раз, когда я пытался. То же самое для кнопки внутреннего вращения.
-webkit-*
для Chrome, -moz-*
для Mozilla Firefox. Вот почему это не сработало для вас.
Возможно, измените введенный номер с помощью javascript на ввод текста, когда вы не хотите, чтобы спрятать;
document.getElementById('myinput').type = 'text';
и остановить пользователя, вводящего текст;
document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}
тогда javascript изменит его обратно, если вы хотите использовать счетчик;
document.getElementById('myinput').type = 'number';
он хорошо работал для моих целей
Чтобы сделать эту работу в Safari, я обнаружил, что добавление! важно для настройки webkit, заставляет кнопку со стрелкой скрываться.
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none !important;
margin: 0; /* <-- Apparently some margin are still there even though it hidden */
}
У меня все еще есть проблемы с разработкой решения для Opera.
Вы можете использовать этот простой код в вашем файле CSS:
input[type="number"] {
-moz-appearance: textfield;
}
Вы используете материал, который спецификация не является окончательной, поэтому я бы сказал, что нет, будет вполне согласованный, кросс-браузерный способ исправления этого.
просто используйте тип ввода = "текст" и используйте форму проверки javascript, чтобы убедиться, что это число.
<input type="number" min="4" max="8" />
в Chrome и вижу типичное поле ввода со стрелками вверх и вниз сбоку.