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

Question

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

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

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

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

759 5

jQuery css firefox input spinner

5 ответов:

Comments

Ничего не найдено.

Richard Deeming · Accepted Answer · 2014-09-18 04:07:26

по данным этот блог, вам необходимо установить -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"/>

Josh Crozier · Accepted Answer · 2015-01-01 03:16:58

стоит отметить, что значение по умолчанию -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).

AngelHotxxx · Accepted Answer · 2018-01-09 09:23:59

на 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.

Abhijeet · Accepted Answer · 2014-05-20 06:30:37

столкнулся с той же проблемой после обновления 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">

navin prakash · Accepted Answer · 2017-03-30 13:41:49

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