Selector de marchas automático

Una palanca de cambio automático recorre la ranura P, R, N, D y la letra elegida se enciende en ámbar.

Ajustes

Color principal#ffa21f

Color secundario#2a2e35

Tamaño16px

Velocidad1x

Texto

Código

index.html

<fieldset class="uvq04-gear"><legend>Cambio</legend><div class="pn"><span class="gt" aria-hidden="true"><i class="kb"></i></span><div class="ls"><label><input type="radio" name="uvq04-gear" checked><b>P</b><span>Aparcar</span></label><label><input type="radio" name="uvq04-gear"><b>R</b><span>Marcha atrás</span></label><label><input type="radio" name="uvq04-gear"><b>N</b><span>Punto muerto</span></label><label><input type="radio" name="uvq04-gear"><b>D</b><span>Conducir</span></label></div></div></fieldset>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Radio buttons

Ver todos: Radio buttons

Radio con punto que rebota

Radio buttonsHTML + CSS

Radio con anillo dibujado

Radio buttonsHTML + CSS

Selector con píldora deslizante

Radio buttonsHTML + CSS

Tarjetas radio con icono

Radio buttonsHTML + CSS

Radio con punto saltarín

Radio buttonsHTML + CSS

Radio con relleno líquido

Radio buttonsHTML + CSS

Pestañas verticales con luz

Radio buttonsHTML + CSS

Selector de planes

Radio buttonsHTML + CSS

Dónde usarlo

Este grupo de radios toma prestada la palanca de un coche automático: cuatro inputs radio reales van junto a una ranura oscura y un pomo redondo baja hasta la posición elegida mientras su letra brilla como la iluminación del salpicadero. Es CSS con :has, y encaja en configuradores de coches, apps de conducción, paneles de ajustes con carácter y cualquier modo con un orden fijo.

Cambia el brillo ámbar con el color principal y el tono de la consola con el secundario. Renombra los cuatro modos según tu producto, como eco, confort, sport y circuito, y usa etiquetas cortas para que las filas queden alineadas.