Сховати спінер у введеному номері

202

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

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

Чи можна відключити це за допомогою CSS або jQuery?

— NereuJunior
джерело

2

Якщо ви не хочете, щоб стрілки крутилися, тоді не використовуйте type="number". Ви можете використовувати type="text"і patternатрибут , щоб встановити регулярний вираз , щоб переконатися , що це число.

— Ракета Hazmat

4

-webkit-Internal-spin-button -webkit-external-spin-button with -webkit-зовнішній вигляд: немає; маржа: 0; Не працюйте у Firefox.

— NereuJunior

12

@RocketHazmat: type="number"потрібно, щоб мобільні браузери показували цифрову клавіатуру замість повної клавіатури.

— CodeManX

3

<input type="tel">це лише цифри, і вони не включають прядильники.

— TomasVeras

5

Зміна type="text"- це погана ідея, оскільки сенсорні пристрої показуватимуть неправильну клавіатуру.

— WhyNotHugo

523

Відповідно до цієї публікації в блозі , вам потрібно встановити -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, де вони виглядають погано, але підтримує їх в інших браузерах, включаючи ті, що відображають числову клавіатуру, як згадується в ОП.

— Майкл Шепер

4

Ще декілька корисних відомостей від Джеффа Грем: Числові введення - Порівняння за замовчуванням браузера

— Річард Деімінг,

3

це працює, і справді він видаляє прядильники, але тоді ви тепер можете вводити в нього буквено-цифрові символи. Сподіваємось, хтось знайде спосіб впоратися з цим сценарієм, не перевіряючи введені ключі, чи є вони чи ні.

— Jovanni G

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).

— Джош Крозьє
джерело

11

В 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.

— АмерлікА
джерело

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

— навин пракаш
джерело

вище css-коду достатньо, щоб приховати html <input type = "number"> spinner

— navin prakash

3

Зіткнувшись із тим самим повідомленням про оновлення Firefox до 29.0.1, це також зазначено тут https://bugzilla.mozilla.org/show_bug.cgi?id=947728

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

Я віддаю перевагу CSS-спосіб, наприклад:

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

Або

Ви також можете це робити в рядку:

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

— Абхієет
джерело

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