HTML + CSSRadio buttons
Pregunta de test
Elige una respuesta: la correcta se pone verde y, si fallas, tu opción tiembla en rojo y se enseña la buena.
Ajustes
16px
1x
Código
<fieldset class="uv-rqz"><legend>¿Cuál es el planeta más grande?</legend><label><input type="radio" name="uv-rqz"><span><b>A</b>Saturno<em aria-hidden="true"></em></span></label><label class="ok"><input type="radio" name="uv-rqz"><span><b>B</b>Júpiter<em aria-hidden="true"></em></span></label><label><input type="radio" name="uv-rqz"><span><b>C</b>Neptuno<em aria-hidden="true"></em></span></label><label><input type="radio" name="uv-rqz"><span><b>D</b>La Tierra<em aria-hidden="true"></em></span></label></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.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Las apps de aprendizaje, los tours de bienvenida y los juegos de preguntas necesitan respuesta inmediata sin recargar. Marca la opción correcta con una clase y el CSS hace el resto: si la eliges, late en verde con un check; si eliges otra, esa tiembla en rojo con una equis y la correcta se resalta, así que siempre se aprende algo.
Cada respuesta lleva una letra, un contorno claro y una zona de toque amplia. Los colores de acierto y fallo se pueden cambiar y el temblor respeta el movimiento reducido.