Presintonías
HTML + CSSRadio buttons

Teclas de presintonía de radio

Las teclas mecánicas de una radio de coche antigua: la que pulsas se hunde y la anterior salta hacia arriba.

Ajustes

16px
1x

Código

<fieldset class="uvq04-pst"><legend>Presintonías</legend><div class="fp"><div class="ds" aria-hidden="true"><span class="fq"></span><span class="st">ST</span></div><div class="ks"><label><input type="radio" name="uvq04-pst"><span class="ky"><b>1</b></span><span class="nm">Clásica</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>2</b></span><span class="nm">Noticias</span></label><label><input type="radio" name="uvq04-pst" checked><span class="ky"><b>3</b></span><span class="nm">Jazz</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>4</b></span><span class="nm">Pop</span></label><label><input type="radio" name="uvq04-pst"><span class="ky"><b>5</b></span><span class="nm">Deportes</span></label></div></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

Dónde usarlo

Los radio buttons se llaman así por estas teclas: en las radios de coche antiguas, al pulsar una presintonía se hundía y soltaba las demás. Este bloque lo recrea sobre un frontal de cromo cepillado, con teclas de plástico crema que bajan al elegirlas, vuelven a subir con un pequeño rebote y llevan una pantalla ámbar a la frecuencia de la emisora.

Usa el color principal para la pantalla y el testigo de la tecla pulsada, y el secundario para el plástico. Caben cinco teclas con holgura; cambia las emisoras o conviértelas en programas de un reproductor, una calefacción o una cafetera.