html5 - tutorial - ¿Es posible mostrar siempre las flechas arriba/abajo para ingresar el "número"?

personalizar contact form 7 plugin

Question

Quiero mostrar siempre las flechas arriba / abajo para el campo "número" de entrada. 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";

}

Answer 1

Puede lograr esto (al menos en Chrome) usando la propiedad Opacidad:

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. Por lo tanto, tenga cuidado al usar este código en la naturaleza sin recurrir a otros navegadores.

Answer 2

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

Pruebe el widget spinner de jQuery UI que ofrece mucha más versatilidad en lo que respecta al diseño.

Ejemplo de trabajo

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

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