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

202

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

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

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

— 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
источник

0

Я смешал несколько ответов из ответов выше и из Как убрать стрелки из ввода [type = "number"] в Opera в scss:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

— Darex1991
источник

0

Это сработало для меня:

    input[type='number'] {
    appearance: none;
}

Решено в Firefox, Safari, Chrome. Кроме того, -moz-appearance: textfield;больше не поддерживается ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Яхель Йехиели
источник

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