Чи можна завжди відображати стрілки вгору / вниз для введення “числа”?

Я хочу завжди показувати стрілки вгору / вниз для поля введення "число". Чи можливо це? Поки що мені не пощастило ...

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

}

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

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

   opacity: 1;

}

Як зазначено вище, це, швидше за все, працюватиме лише в Chrome. Тож будьте обережні, використовуючи цей код у дикій природі без резервної копії для інших браузерів.

Я спробував це, і це спрацювало

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

</style>
<input type="number" value="1" min="1" max="999">

Знайдено тут

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

Спробуйте віджет jQuery UI, який пропонує набагато більшу універсальність у стилістиці.

Робочий приклад

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

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

Якщо ви не проти зосередитись на своєму вкладі, зробіть

   document.getElementById(<id>).focus();