Есть ли постоянный способ в браузерах скрыть новые спиновые окна, которые некоторые браузеры (например, 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 */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}<input type="number" step="0.01" />В 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" />Согласно Руководство по кодированию пользовательских интерфейсов для мобильных устройств Safari, вы можете использовать следующее для отображения числовой клавиатуры в браузере iPhone:
<input type="text" pattern="[0-9]*" />
A pattern of \d* также будет работать.
Попробуйте вместо этого использовать input type="tel". Появляется клавиатура с цифрами, и на ней не отображаются спин-боксы. Он не требует JavaScript, CSS, плагинов или чего-либо еще.
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"/>
Только добавить этот 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="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>
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. Правила отключены из-за плохого выбора.
каждый раз, когда я пытался. То же самое для кнопки внутреннего вращения.
Чтобы сделать эту работу в 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.
Возможно, измените введенный номер с помощью 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';
он хорошо работал для моих целей
Вы можете использовать этот простой код в вашем файле CSS:
input[type="number"] {
-moz-appearance: textfield;
}
Вы используете материал, который спецификация не является окончательной, поэтому я бы сказал, что нет, будет вполне согласованный, кросс-браузерный способ исправления этого.
просто используйте тип ввода = "текст" и используйте форму проверки javascript, чтобы убедиться, что это число.