Вимкнути поворотні кнопки webkit для типу введення = “число”?

203

У мене є сайт, який в основному призначений для користувачів мобільних пристроїв, але також настільних ПК.

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

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

Чи можна відключити це за допомогою -webkit-appearanceчи іншого фокусу CSS? Я пробував без особливої долі.

css html webkit

— pojo
джерело

15

Якщо ви віддаєте перевагу використовувати type="text"з інших причин і лише переключились на число для функції цифрової клавіатури, ви можете використовувати pattern="[0-9]*"функцію клавіатури, що дозволяє зберегти type="text". Див stackoverflow.com/questions/6171903 / ...

— joshuahedlund

114

Наведений нижче css працює як для Chrome, так і для Firefox

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

— Ролвін Креста
джерело

8

краще рішення, ніж вище (більш повне)

— aqm

-моз-вигляд: текстове поле; додаток було єдиною відповіддю, яке працювало на мене. Дякую!

— Наноріппер

283

Я виявив, що на це є друга частина відповіді.

Перша частина допомогла мені, але я все ще мав пробіл праворуч від type=numberвведення. Я нівелював маржу на вході, але, мабуть, мені довелося також нульову маржу на спінері.

Це виправлено:

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

— Боб Сприн
джерело

Дивовижно. У мене була подібна проблема , але з дещо іншою стратегією CSS, яка призводить до абсолютно нових проблем ...

— Лукаш Едер

1

Хтось знає про спосіб виправити поведінку прокрутки, де можна нескінченно прокручувати вгору та вниз? Я встановив min=0.01(і maxякесь довільне значення) у своєму вхідному елементі, але я вважаю за краще, щоб колесо прокрутки просто рухалося вгору та вниз по сторінці. Я використовую AngularJS, і я не можу знайти нічого атм.

— JaKXz

2

Посилання на авторитетне джерело для цієї конкретної проблеми та такої інформації: css-tricks.com/snippets/css/turn-off-number-input-spinners

— Josh Habdas

1

щоб було зрозуміло, це не знімає функцію прокрутки миші!

— babalu

1

-moz-поява: текстове поле для Firefox

— Кевін Саттл

16

Не впевнений, що це найкращий спосіб зробити це, але це змушує спінери зникати на Chrome 8.0.552.5 dev:

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

— robertc
джерело

@JethroLarson Що над цим не працює? Ви можете спробувати -webkit-outer-spin-buttonзамість цього.

— robertc

це чудово спрацювало для type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-izgled: none; }

— uglymunky

11

Здається, неможливо запобігти появі спінерів в Opera. Як тимчасове вирішення, ви можете звільнити місце для прядильників. Наскільки я можу сказати, наступний CSS додає достатньо прокладки, тільки в Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

— Гольвен
джерело

4

@Knu Дійсно, але тут варто згадати, оскільки код у відповіді залишає вхідні дані непридатними для Opera.

— Гульвен

4

@Goulvench, будь ласка, не :) Я вважаю це дуже корисним, хтось ще може.

— frnhr

-2

Ви також можете приховати спінер за допомогою наступного фокусу:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}

— Себастьєн Варинойс
джерело