UKW-Radiotuner

Wähle einen Sender und die Nadel gleitet über die beleuchtete Skala zu seiner Frequenz.

Einstellungen

Hauptfarbe#ff4b3a

Zweitfarbe#ffc46b

Größe16px

Tempo1x

Text

Code

index.html

<fieldset class="uv-rfm"><legend>Sender</legend><div class="dl" aria-hidden="true"><span class="sc"></span><span class="nm"><b>88</b><b>92</b><b>96</b><b>100</b><b>104</b><b>108</b></span><i class="nd"></i></div><div class="st"><label><input type="radio" name="uv-rfm"><span><b>88.2</b> Jazz</span></label><label><input type="radio" name="uv-rfm"><span><b>94.6</b> Nachrichten</span></label><label><input type="radio" name="uv-rfm" checked><span><b>101.3</b> Pop</span></label><label><input type="radio" name="uv-rfm"><span><b>107.9</b> Rock</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.

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

Diese Radiogruppe ist wörtlich ein Radio. Eine warm beleuchtete Skala zeigt die Marken von 88 bis 108, und wählst du darunter einen Sender, gleitet die rote Nadel langsam und leicht federnd an ihren Platz, wie beim Drehen an einem echten Tuner. Charmant für Musik-Apps, Podcast-Kategorien, Playlists und Retro-Markenseiten.

Die Sender sind normale Radiobuttons in einem Raster, funktionieren also mit Tastatur und Touch. Frequenzen, Namen und Nadelpositionen änderst du im Code, die zwei Farben bestimmen Nadel und Skalenlicht.