Чи можу я приховати відкручувальний рядок введення номера HTML5?

Чи є у веб-переглядачах послідовний спосіб приховати нові спінові вікна, які деякі браузери (наприклад, Chrome) надають для введення HTML номера типу? Я шукаю метод CSS або JavaScript, щоб запобігти появі стрілок вгору / вниз.

<input id="test" type="number">

Цей CSS ефективно приховує спін-кнопку для веб-браузерів (протестували її в Chrome 7.0.517.44 та Safari версії 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

Ви завжди можете використовувати інспектор (webkit, можливо, Firebug для Firefox) для пошуку відповідних властивостей CSS для цікавлять вас елементів, шукайте псевдоелементи. Це зображення показує результати для вхідного елемента type = "number":

На даний момент Firefox 29 додає підтримку числових елементів, тому ось фрагмент для приховування спінерів у веб-браузерах та браузерах на базі moz

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

Коротка відповідь:

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" />

Більш довга відповідь:

Щоб додати до існуючої відповіді ...

Firefox:

У поточних версіях Firefox значенням -moz-appearanceвластивості для цих елементів є (за замовчуванням агент користувача) значення number-input. Змінення цього значення textfieldефективно видаляє спінер.

input[type="number"] {
    -moz-appearance: textfield;
}

У деяких випадках, можливо, ви хочете, щоб прядилка спочатку була прихована , а потім з'явилася на курсор / фокус. (Зараз це поведінка за умовчанням у Chrome). Якщо так, ви можете скористатися наступним:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

Chrome:

У поточних версіях Chrome вже вказано значення -webkit-appearanceвластивості (агент агент) для цих елементів textfield. Щоб видалити спінер, значення -webkit-appearanceвластивості потрібно змінити noneна ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo-класи (це -webkit-appearance: inner-spin-buttonза замовчуванням).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

Варто зазначити, що margin: 0використовується для видалення поля в старих версіях Chrome.

Наразі, що стосується написання цього запису, тут використовується стиль користувацьких агентів за замовчуванням у псевдокласі "внутрішня кнопка":

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Відповідно до посібника з кодування досвіду користувачів Apple для мобільного Safari , ви можете використовувати наступне для відображення цифрової клавіатури в браузері iPhone:

<input type="text" pattern="[0-9]*" />

patternЗ \d*також буде працювати.

Спробуйте використовувати input type="tel"замість цього. Він вискакує клавіатуру з цифрами, і на ній не відображаються спинові поля. Він не вимагає JavaScript або CSS або плагінів або чогось іншого.

Додайте цей CSS лише для видалення спінера на введення числа

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Я зіткнувся з цією проблемою із a input[type="datetime-local"] , яка схожа на цю проблему.

І я знайшов спосіб подолати подібні проблеми.

По-перше, ви повинні ввімкнути тіньову функцію хрому за допомогою "DevTools -> Налаштування -> Загальне -> Елементи -> Показати тінь агента користувача DOM"

Тоді ви можете побачити всі затінені елементи DOM , наприклад, для <input type="number">, повний елемент із затіненим DOM є:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

Згідно з цією інформацією, ви можете скласти деякі CSS, щоб приховати небажані елементи, як сказав @Josh.

Не те, про що ви просили, але я роблю це через помилку фокусування в WebKit із спінбоксами:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Це може дати вам ідею допомогти у тому, що вам потрібно.

Це краща відповідь, яку я хотів би запропонувати на курсор миші та без миші

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Щоб зробити цю роботу в Safari, я виявив, що додавання! Важливо для налаштування веб-кайтів змушує приховати віджимаючи кнопку.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

У мене все ще виникають проблеми з розробкою рішення для Opera.

На Firefox для Ubuntu, просто за допомогою

    input[type='number'] {
    -moz-appearance:textfield;
}

зробив трюк для мене.

Додавання

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Приведе мене до

Невідомий псевдоклас або псевдоелемент '-webkit-external-spin-button'. Рулесет ігнорується через поганий вибір.

кожен раз, коли я намагався. Те саме для внутрішньої кнопки віджиму.

Можливо, змініть введення числа за допомогою javascript на введення тексту, коли вам не потрібен спінер;

document.getElementById('myinput').type = 'text';

і припинити користувачеві вводити текст;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

то попросіть javascript змінити його назад у випадку, якщо ви хочете спінер;

document.getElementById('myinput').type = 'number';

це добре працювало для моїх цілей

У веб-браузерах WebKit і Blink & Browser Of All Kind Of Browser використовуються такі CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Мені це було потрібно для роботи

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

Додаткова лінія appearance: noneбула для мене ключовою.

Я знайшов надзвичайно просте рішення за допомогою

<input type="text" inputmode="numeric" />

Це підтримується більшістю браузерів: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode