¡Hola a todos!
Estoy intentando modernizar un poco el selector de cantidad en la página de producto de mi tienda. Actualmente, en PrestaShop 1.7, el input type="number" viene con las flechitas por defecto del navegador que no me gustan nada. Quiero un diseño más limpio, con botones de '+' y '-' a los lados, tipo 'píldora', sin las flechas nativas.
He estado trasteando en themes/classic/assets/css/custom.css y he conseguido ocultar las flechas, pero el diseño de los botones no me cuadra y se ve un poco roto. Aquí está lo que llevo intentado:
.product-quantity .input-group input[type=number]::-webkit-inner-spin-button,
.product-quantity .input-group input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-quantity .input-group input[type=number] {
-moz-appearance: textfield;
border-radius: 0;
text-align: center;
width: 60px; /* Provisional */
El problema es que, aunque quita las flechas, la integración visual de los botones con el campo de texto no es fluida y no consigo esa forma de 'píldora' unificada. ¿Alguna idea de cómo darle ese toque elegante y que se vea bien en Chrome y Firefox?