HTML + CSSRadiobuttons

Garnrollen zur Farbwahl

Garnrollen aus Holz auf einem Brett: Die gewählte hebt sich, dreht sich und lässt einen Faden nach unten kringeln.

Einstellungen

Hauptfarbe#c9965c

Zweitfarbe#7a5230

Größe16px

Tempo1x

Text

Code

index.html

<fieldset class="uvq04-spl"><legend>Garnfarbe</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">Mohn</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">Marine</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">Senfgelb</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">Flaschengrün</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">Naturweiß</span></label></div></fieldset>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Radiobuttons

Alle ansehen: Radiobuttons

Radio-Button mit federndem Punkt

RadiobuttonsHTML + CSS

Radio mit gezeichnetem Ring

RadiobuttonsHTML + CSS

Umschalter mit gleitender Pille

RadiobuttonsHTML + CSS

Radio-Karten mit Icon

RadiobuttonsHTML + CSS

Radio mit springendem Punkt

RadiobuttonsHTML + CSS

Radio mit Flüssigkeitsfüllung

RadiobuttonsHTML + CSS

Vertikale Tabs mit Leuchtbalken

RadiobuttonsHTML + CSS

Auswahl für Tarife

RadiobuttonsHTML + CSS

Wofür du ihn nutzen kannst

Fünf hölzerne Garnrollen stehen auf einem kleinen Brett, jede ein echter Radio-Input. Die gewählte Rolle hebt sich, das aufgewickelte Garn läuft, als würde sie sich drehen, und ein loser Faden zeichnet sich als SVG-Strich darunter. Passend für Kurzwarenläden, Stickpackungen, Produktfarben und Bastelblogs.

Die Garnfarbe steht im Style jeder Beschriftung, tausche sie gegen dein eigenes Sortiment. Die Hauptfarbe färbt die Holzscheiben, die Zweitfarbe das Brett; halte die Namen bei einem kurzen Wort, damit sie unter jede Rolle passen.