Скрыть Spinner в поле ввода - Firefox 29

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

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

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

Ответы

Ответ 1

Согласно этому сообщению в блоге, вам нужно установить -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"/>

Ответ 2

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

Если вы хотите скрыть счетчик по умолчанию, вы можете сначала установить -moz-appearance: textfield, и если вы хотите, чтобы spinner появлялся на :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"/>

Ответ 3

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

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

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

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

Ответ 4

/* 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;}

Ответ 5

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

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

Я предпочитаю способ CSS Например: -.

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

Или

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

<input type="number" style="-moz-appearance: textfield">

Ответ 6

Я смешал несколько ответов из ответов выше и из Как удалить стрелки из ввода [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