Hola @ruben_deco, para lograr ese efecto moderno de botones tipo 'píldora' y muestras de color con un anillo activo y transiciones suaves en PrestaShop 1.7.3.3, debemos ajustar la forma en que ocultamos el input de radio y cómo estilizamos su label o span asociado.
El problema con tu box-shadow inset es que no es ideal para crear un anillo exterior que resalte bien. Es mejor usar un box-shadow normal y, para las transiciones, aplicarlas correctamente al elemento que cambia de estado. Aquí tienes un fragmento de CSS mejorado para themes/classic/assets/css/custom.css:
/* Estilos para atributos de texto (tamaño, etc.) */
.product-variants .input-radio-container input[type="radio"] {
position: absolute;
opacity: 0; /* Oculta el radio original de forma accesible */
}
.product-variants .input-radio-container label {
display: inline-flex; /* Para centrar contenido si fuera necesario */
align-items: center;
justify-content: center;
padding: 8px 18px;
Explicación de los cambios:
- Ocultar
input[type="radio"]: Usamos position: absolute; opacity: 0; en lugar de display: none;. Esto oculta visualmente el radio pero lo mantiene accesible para navegadores y lectores de pantalla.
- Estilo de
label (para texto): El label que sigue al radio oculto se estiliza como un botón (display: inline-flex, padding, border-radius, transition). El margin-right ayuda a separar los botones.
- Estado
checked (para texto): Cuando el radio está :checked, aplicamos border-color, background-color, color y un box-shadow externo (0 0 0 2px #007bff;) para crear el efecto de anillo de resaltado.
- Estilo de
span (para colores): Para las muestras de color, el span es el elemento visual. Le damos width, height, border-radius: 50% y transition.
- Estado
checked (para colores): Al seleccionar un color, aplicamos un box-shadow exterior (0 0 0 3px #007bff;) para el anillo, cambiamos el border-color y añadimos un transform: scale(1.05) para un efecto sutil de 'pop'.
Con estos cambios, deberías ver un estilo mucho más moderno y con transiciones suaves al seleccionar las opciones.