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

}

— 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

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