HTML + CSSRadio buttons
Encuesta con resultados
Al votar, cada opción se convierte en una barra que crece hasta su porcentaje.
Ajustes
16px
1x
Código
<fieldset class="uv-rpl"><legend>¿Dónde pasarás las vacaciones?</legend><label style="--v:46%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Playa</span><span class="pc">46 %</span></label><label style="--v:31%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Montaña</span><span class="pc">31 %</span></label><label style="--v:17%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Ciudad</span><span class="pc">17 %</span></label><label style="--v:6%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">En casa</span><span class="pc">6 %</span></label><p class="ft">1.284 votos</p></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 encuestas tienen más gracia cuando ves el resultado al momento. Antes de votar, la tarjeta muestra opciones con contorno; tras elegir, cada fila se convierte en una barra que crece hasta su parte, los porcentajes entran deslizándose, tu opción recibe un check y una barra de color suave, y el total de votos aparece abajo.
Los porcentajes se fijan por opción con una variable CSS, así que puedes rellenarlos desde tu backend. Va bien en blogs, newsletters, apps de comunidad y páginas de eventos, y funciona sin JavaScript gracias a :has.