¿Es posible mostrar siempre flechas arriba / abajo para ingresar el “número”?

81

Quiero mostrar siempre flechas arriba / abajo para el campo de entrada "número". es posible? Hasta ahora no he tenido suerte ...

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

}
html css input webkit shadow-dom Oneezy
fuente
2
Posible duplicado de la entrada
Samuel Liew
¿Encontraste la solución? En mi caso no funciona.
ʎzɐɹƆ
¿Qué navegador estás usando? funciona en Chrome
Oneezy

Respuestas:

150

Puede lograr esto (en Chrome al menos) utilizando la propiedad Opacity:

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

   opacity: 1;

}

Como se indicó anteriormente, es probable que esto solo funcione en Chrome. Así que tenga cuidado al usar este código en la naturaleza sin una alternativa para otros navegadores.

BJack
fuente
1
como dijo @NewBeeee: En firefox y safari, es una característica predeterminada para mostrarlo siempre ( stackoverflow.com/questions/24286506/… )
titusfx
7

Probé esto y funcionó 

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

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

Encontrado aquí

Atta H.
fuente
4

Si está tratando de obtener la misma apariencia en diferentes navegadores, puede verse obligado a usar un complemento / widget o crear uno usted mismo, todos los navegadores principales parecen implementar números giratorios de manera diferente.

Pruebe el widget giratorio de jQuery UI, que ofrece mucha más versatilidad cuando se trata de estilo.

Ejemplo de trabajo

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

$("#spinner").spinner();
apaul
fuente
No estoy tratando de obtener la compatibilidad con todos los navegadores, solo quería saber si había un truco de CSS que les permitiera estar siempre visibles
Oneezy
Toda mi idea detrás de esto era "degradar con gracia" ... si el navegador no es compatible, parecerá ser solo un cuadro de texto. . Si lo hacen, adoptan la apariencia de la ruleta de números predeterminada, pero no solo al pasar el
mouse
El problema con JQuery UI es que tiene muchos conflictos con bootstrap. Entonces, si está utilizando bootstrap en su proyecto, tendrá problemas
Dattatreya Kugve
0

Si no le importa concentrarse en sus comentarios,

   document.getElementById(<id>).focus();
Irina Rapoport
fuente