Temperatura en °C y °F
Un termómetro de cristal que sube y pasa de frío a cálido con el valor; al cambiar a °F el número se convierte solo.
Ajustes
Código
<div class="uvq06-tp"><div class="th" aria-hidden="true"><span class="tb"><i class="hg"></i></span><span class="bu"></span></div><div class="sd"><label for="uvq06-tp-in" class="lb">Temperatura</label><div class="fd"><input id="uvq06-tp-in" type="number" inputmode="decimal" step="0.5"><span class="un">°C</span></div><div class="sg" role="radiogroup" aria-label="Unidad"><label><input type="radio" name="uvq06-tp-u" value="c"><span>°C</span></label><label><input type="radio" name="uvq06-tp-u" value="f"><span>°F</span></label><i aria-hidden="true"></i></div><p class="fl" aria-live="polite"></p></div></div>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 Inputs
Ver todos: InputsDónde usarlo
Un campo numérico para temperaturas con un termómetro de cristal al lado. La altura del mercurio y su color salen de una sola variable de CSS que mezcla el color frío y el cálido según sube el valor, y una etiqueta corta describe la sensación. Un control segmentado cambia entre Celsius y Fahrenheit y convierte el número con un pequeño giro.
Pon el color cálido como principal y el frío como secundario. Encaja en widgets del tiempo, paneles de domótica, apps de cocina y formularios de laboratorio, y las etiquetas del script pueden convertirse en rangos para hornos, neveras o acuarios.