AIMRAN
Color del hilo
HTML + CSSRadio buttons

Carretes de hilo de colores

Carretes de madera en una balda: el elegido sube, gira y suelta una hebra que se riza hacia abajo.

Ajustes

16px
1x

Código

<fieldset class="uvq04-spl"><legend>Color del hilo</legend><div class="rw"><label style="--c:#c8323a"><input type="radio" name="uvq04-spl" checked><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Amapola</span></label><label style="--c:#24365e"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Marino</span></label><label style="--c:#d39a2a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Mostaza</span></label><label style="--c:#2f6b4a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Botella</span></label><label style="--c:#e6dcc6"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Crudo</span></label></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

Cinco carretes de hilo de coser de madera sobre una pequeña balda, cada uno un input radio real. El carrete elegido se levanta, el hilo enrollado se desplaza como si girara y una hebra suelta se dibuja debajo con un trazo SVG. Encaja en mercerías, kits de bordado, colores de un producto y blogs de manualidades.

El color de cada hilo va en el estilo de su etiqueta, así que cámbialos por tu propia gama. El color principal tiñe las tapas de madera y el secundario la balda; deja los nombres en una palabra corta para que quepan bajo cada carrete.