Estilo de tarjeta para métodos de pago en el checkout

rocio_96

Hola, estoy intentando darle un estilo más moderno a los métodos de pago en el checkout, quiero que se vean como tarjetas clicables en lugar de las típicas filas con radio buttons. He conseguido ocultar los radios y estilizar el contenedor, pero pierdo el efecto de selección y el foco de accesibilidad, además de que el borde no cambia cuando se selecciona uno. Estoy editando themes/classic/assets/css/custom.css. ¿Alguna idea de cómo manejar esto correctamente?

Aquí mi intento inicial:

.payment-options .radio-inline label {
    display: block;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}
.payment-options .radio-inline input[type="radio"] {
    display: none;

El problema es que al hacer display: none en el radio, no hay forma de saber cuál está seleccionado con CSS puro sin JavaScript, y se pierde la navegación por teclado. Necesito que al seleccionar la tarjeta, cambie el borde o el fondo.

miguel_deco50

Hola @rocio_96, te entiendo perfectamente, es un clásico con los radios. El display: none es el culpable de la pérdida de accesibilidad y de que no puedas usar el :checked directamente sobre el input y luego estilizar su hermano label.

Para PrestaShop 1.7 (asumo que estás en esa versión, o similar), la estructura HTML del checkout clásico a veces es un poco enrevesada. Lo ideal es mantener el input visible de alguna forma para el navegador y luego estilizar el label que le sigue. ¿Has probado con opacity: 0 y position: absolute en el radio para ocultarlo visualmente pero mantenerlo en el DOM?

Milo

Sí, @miguel_deco50 tiene razón. Esa es la clave para no romper la accesibilidad. Cuando usas display: none, el elemento se elimina del flujo del documento y los lectores de pantalla lo ignoran, además de no poder recibir foco. Para PrestaShop 1.7.0.0, la estructura de los módulos de pago suele poner el radio dentro de un div o directamente antes del label en el mismo contenedor.

Lo importante es que uses el selector de hermano adyacente (+) para aplicar estilos al label cuando el input[type="radio"] esté :checked. Asegúrate de que el id del radio coincida con el for del label para que el clic en el label también active el radio oculto.

rocio_96

¡Increíble, @Milo! Probé tu código en custom.css y funciona a la perfección en mi PrestaShop 1.7.0.0. La explicación sobre opacity: 0 y el selector + label es muy clara y justo lo que necesitaba para entender cómo mantener la accesibilidad. Ahora las tarjetas se ven geniales y el efecto de selección es muy intuitivo. ¡Muchísimas gracias por la ayuda tan detallada!