Можно ли всегда показывать стрелки вверх/вниз для ввода "числа"?

Я хочу всегда показывать стрелки вверх/вниз для ввода поля "число". Это возможно? Пока мне не повезло...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

Ответ 1

Вы можете достичь этого (по крайней мере, в Chrome), используя свойство Opacity:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

Как указано выше, это, скорее всего, будет работать только в Chrome. Поэтому будьте осторожны, используя этот код в дикой природе, без резерва для других браузеров.

Ответ 2

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

Попробуйте jQuery UI spinner widget, он предлагает намного больше универсальности, когда дело доходит до стиля.

Рабочий пример

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();