Скрыть спиннер во входном номере - Firefox 29

202

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

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

Можно ли отключить это с помощью CSS или jQuery?

jquery css firefox input spinner NereuJunior
источник
2
Если вы не хотите вращать стрелки, не используйте type="number". Вы можете использовать type="text"и patternатрибут, чтобы установить регулярное выражение, чтобы убедиться, что это число.
Ракета Хазмат
4
-webkit-inner-spin-button -webkit-external-spin-button с -webkit-появление: нет; поле: 0; Не работайте в Firefox.
NereuJunior
12
@RocketHazmat: type="number"требуется, чтобы мобильные браузеры отображали цифровую клавиатуру вместо полной клавиатуры.
CodeManX
3
<input type="tel">это только цифры и не включает в себя счетчики.
TomasVeras
5
Изменение type="text"- плохая идея, потому что сенсорные устройства покажут не ту клавиатуру.
WhyNotHugo

Ответы:

522

Согласно этому сообщению в блоге , вы должны установить -moz-appearance:textfield;на input.

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" step="0.01"/>
Развернуть фрагмент

Ричард Деминг
источник
1
Я обернул это, @-moz-document url-prefix() { ... }и оно делает то, что я хочу: скрывает счетчики в Firefox, где они выглядят плохо, но сохраняет их в других браузерах, включая те, которые вызывают цифровую клавиатуру, как упоминалось в OP.
Майкл Шепер
4
Еще одна полезная информация от Джеффа Грэма: числовые входы - сравнение значений по умолчанию для браузера
Ричард Деминг,
3
это работает и действительно удаляет счетчики, но теперь вы можете вводить в них буквенно-цифровые символы. Надеюсь, что кто-то найдет способ справиться с этим сценарием без проверки введенных ключей, являются ли они цифрами или нет.
Джованни Г
1
@JovanniG: Даже если вы не удаляете счетчики, вы все равно можете вводить нечисловые символы на входе в Firefox. Попробуйте это с демо на MDN . Chrome предотвращает нечисловой ввод в обоих примерах.
Ричард
1
@alxndr: Кроме того, я только что попробовал «Выполнить фрагмент кода» в Chrome 66, и он работает, как и ожидалось.
Ричард Деминг,
50

Стоит отметить, что значение по умолчанию для -moz-appearanceэтих элементов number-inputв Firefox.

Если вы хотите скрыть счетчик по умолчанию, вы можете установить его -moz-appearance: textfieldизначально, а если хотите, чтобы счетчик появился в :hover/ :focus, вы можете перезаписать предыдущий стиль с помощью -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>
Развернуть фрагмент

Я подумал, что кто-то может найти это полезным, поскольку недавно мне пришлось делать это в попытках улучшить согласованность между Chrome / FF (так как в Chrome по умолчанию ведут себя числовые входы).

Если вы хотите увидеть все доступные значения для -moz-appearance, вы можете найти их здесь (mdn).

Джош Крозье
источник
10

В SASS/ SCSSstyle вы можете написать так:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Определенно этот стиль кода можно использовать в PostCSS.

AmerllicA
источник
7 
/* for chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;}             


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}
Навин Пракаш
источник
3

Столкнулся с той же проблемой после обновления Firefox до 29.0.1, это также указано здесь https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Решения: они (ребята из Mozilla) исправили это, добавив поддержку для -moz-creation <input type="number">. Вам просто нужно иметь стиль, связанный с вашим полем ввода с " -moz-appearance:textfield;".

Я предпочитаю CSS, например:

.input-mini{
-moz-appearance:textfield;}

Или

Вы также можете сделать это встроенным:

<input type="number" style="-moz-appearance: textfield">
Abhijeet
источник