Стиль типу введення = число

Question 1

Чи можна застосувати стиль у внутрішніх стрілках "вгору" та "стрілка вниз" <input type="number">в CSS? Я хотів би змінити фон стрілки вгору на синій, а стрілки вниз на червоний. Будь-які ідеї?

укладка внутрішніх стрілок

Question 2

ОНОВИТИ 17.03.2017

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

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

<input type="number" />

Розгорніть фрагмент

або завжди показувати:

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

<input type="number" />

Розгорніть фрагмент

~~Ви можете спробувати наступне, але майте на увазі, що це працює лише для Chrome :~~

Показати фрагмент коду

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

<input type="number" />

Розгорніть фрагмент

Question 3

Для Mozilla

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

Question 4

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

Примітки:

Додавання pointer-events: none;дозволяє натиснути кнопку перекриття, але тоді ви не можете стилізувати кнопку під час наведення.
Стрілки видно в Edge, але не працюють, оскільки Edge не використовує стрілки. Він лише додає "х" для очищення вводу.

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

Розгорніть фрагмент

Question 5

Трохи відрізняється від інших відповідей, використовуючи подібну концепцію, але div замість псевдокласів:

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>

Розгорніть фрагмент

Question 6

Я боровся з цим на мобільному та планшетному ПК. Моє рішення було використовувати 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>

Розгорніть фрагмент

Question 7

Божевільна ідея ...

Ви можете пограти з деякими псевдоелементами та створити стрілки вгору / вниз для шістнадцяткових кодів вмісту 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>

Розгорніть фрагмент

Question 8

наведений вище код для chrome працює нормально. я пробував, як це в mozila, але це не працює. я знайшов рішення для цього

Для мозила

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

Дякую Санджиб

Question 9

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

Найбільш стабільний варіант, який я знайшов, - це абсолютно позиціонувати зображення за допомогою покажчика-подій: none; на вертушках.

Неперевірено в Edge, але працює у всіх інших браузерах.