Я могу скрыть спина количеством HTML5 ввода?
существует ли согласованный способ в браузерах скрыть новые спиновые поля, которые некоторые браузеры (например, Chrome) отображают для ввода HTML типа number? Я ищу метод CSS или JavaScript, чтобы предотвратить появление стрелок вверх/вниз.
<input id="test" type="number">
14 ответов
этот CSS эффективно скрывает кнопку spin для браузеров 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's hidden */
}
вы всегда можете использовать инспектор (webkit, возможно Firebug для Firefox), чтобы искать соответствующие свойства CSS для интересующих вас элементов, искать псевдоэлементы. На этом рисунке показаны результаты для входного элемента type= "number":
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:
в текущих версиях Firefox значение по умолчанию (user agent)-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:
в текущих версиях Chrome (User agent) значение по умолчанию -webkit-appearance
свойства на этих элементах уже есть textfield
. Для того, чтобы удалить счетчик,-webkit-appearance
значение свойства должно быть изменено на none
on the ::-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.
в настоящее время, на момент написания этого, вот стиль агента пользователя по умолчанию на псевдо-классе "inner-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;
}
По данным руководство по кодированию пользовательского опыта Apple для мобильного Safari, вы можете использовать следующее для отображения цифровой клавиатуры в iPhone браузер:
<input type="text" pattern="[0-9]*" />
A pattern
of \d*
также будет работать.
попробуйте использовать . Всплывает клавиатура с цифрами, и он не показывает вращение поля. Он не требует JavaScript или CSS или плагинов или чего-либо еще.
я столкнулся с этой проблемой с input[type="datetime-local"]
, что похоже на эту проблему.
и я нашел способ преодолеть такого рода проблемы.
во-первых, вы должны включить функцию shadow-root chrome с помощью "DevTools - > Settings - > General - > Elements - > Show User agent shadow 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.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
<input id="test" type="number">
Не то, что вы просили, но я делаю это из-за ошибки фокуса в WebKit с spinboxes:
// 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";
}
это может дать вам идею, чтобы помочь с тем, что вам нужно.
в Firefox для Ubuntu, просто используя
input[type='number'] {
-moz-appearance:textfield;
}
сделал трюк для меня.
добавлять
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
приведет меня к
неизвестный псевдокласс или псевдо-элемент '- webkit-outer-spin-button'. Набор правил проигнорирован из-за плохого селектора.
каждый раз, когда я пытался. То же самое для внутренней кнопки спина.
Это более лучший ответ, который я хотел бы предложить на мыши и без мыши над
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; }
чтобы сделать эту работу в 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's 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, чтобы удалить spinner на входе числа
/* 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;
}
Я знаю, что на этот вопрос был дан ответ и он старый, но позвольте мне добавить немного. Приведенные выше ответы (со ссылкой на ответ @swehren) верны, но когда вход отключен, вы все равно можете вводить буквенно-цифровые символы.