Стилирование типа ввода = номер

Можно ли применить стиль во внутренней "стрелке вверх" и "стрелке вниз" <input type="number"> в CSS? Я хотел бы изменить фон стрелки вверх на синий, а стрелку вниз на красный. Есть идеи?

Ответ 1

ОБНОВЛЕНИЕ 17/03/2017

Исходное решение больше не будет работать. Прядильщики являются частью теневого дома. Пока просто спрятаться в использовании хрома:

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

<input type="number" />

Ответ 2

Для mozila

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

Для Chrome

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

Ответ 3

Я немного изменил @LcSalazar... он все еще не идеален, потому что фон кнопок по умолчанию все еще можно увидеть как в Firefox, так и в Chrome и Opera (не проверен в Safari); но нажатие на стрелки все еще работает

Примечания:

Добавление pointer-events: none; позволяет вам щелкнуть по кнопке перекрытия, но тогда вы не можете стилизовать кнопку во время зависания.
Стрелки видны в Edge, но не работают, потому что Edge не использует стрелки. Он только добавляет "x" для очистки ввода.

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}

<span class='number-wrapper'>
    <input type="number" />
</span>

Ответ 4

Немного отличается от других ответов, используя аналогичную концепцию, но divs вместо псевдоклассов:

input {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 20px;
  padding: 0px;
  font-size: 14pt;
  border: solid 0.5px #000;
  z-index: 1;
}

.spinner-button {
  position: absolute;
  cursor: default;
  z-index: 2;
  background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  pointer-events: none;
  height: 10px;
  line-height: 10px;
}

#inc-button {
  left: 46px;
  top: 10.5px;
}

#dec-button {
  left: 46px;
  top: 20.5px;
}

<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>

Ответ 5

Сумасшедшая идея...

Вы можете поиграть с некоторыми псевдоэлементами и создать стрелки вверх/вниз шестнадцатеричных кодов содержимого CSS. Единственный вызов будет заключаться в точном расположении стрелки, но он может работать:

input[type="number"] {
    height: 100px;
}

.number-wrapper {
    position: relative;
}

.number-wrapper:hover:after {
    content: "\25B2";
    position: absolute;
    color: blue;
    left: 100%;
    margin-left: -17px;
    margin-top: 12%;
    font-size: 11px;
}

.number-wrapper:hover:before {
    content: "\25BC";
    position: absolute;
    color: blue;
    left: 100%;
    bottom: 0;
    margin-left: -17px;
    margin-bottom: -14%;
    font-size: 11px;
}

<span class='number-wrapper'>
    <input type="number" />
</span>

Ответ 6

приведенный выше код для хром работает нормально. Я так пробовал в мозиле, но не работал. я нашел решение для этого

Для mozila

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

Спасибо Sanjib

Ответ 7

CSS для изменения стрелок - тупой и ненадежный кросс-браузер.

Самый стабильный вариант, который я нашел, - это абсолютно позиционировать изображение с указателями-событиями: нет; на вершине счетчиков.

Не проверено в Edge, но работает во всех других браузерах.

Ответ 8

Я боролся с этим на мобильном телефоне и планшете. Мое решение состояло в том, чтобы использовать absolute позиционирование на счетчиках, поэтому я просто публикую его на тот случай, если это поможет кому-то еще:

<html><head>
    <style>
      body {padding: 10px;margin: 10px}
      input[type=number] {
        /*for absolutely positioning spinners*/
        position: relative; 
        padding: 5px;
        padding-right: 25px;
      }

      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
      }

      input[type=number]::-webkit-outer-spin-button, 
      input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button !important;
        width: 25px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
      }
    </style>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
  </head>
  <body >
    <input type="number" value="1" step="1" />

  </body></html>