Importe en pantalla LCD
Un importe que se escribe como en una calculadora solar: dígitos de siete segmentos, céntimos primero y teclas de goma.
Ajustes
Código
<div class="uvq06-lcd"><label for="uvq06-lcd-in" class="lb">Importe</label><div class="cs"><div class="sol" aria-hidden="true"><i></i><i></i><i></i><i></i></div><div class="sc"><input id="uvq06-lcd-in" inputmode="numeric" autocomplete="off" spellcheck="false"><div class="dp" aria-hidden="true"><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i><i class="p"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="eu">€</span></div></div><div class="ks"><button type="button" data-k="c">C</button><button type="button" data-k="00">00</button><button type="button" data-k="del" aria-label="Borrar">⌫</button></div></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
Este campo de importe toma prestada la pantalla de una calculadora de bolsillo. Cada dígito se dibuja con siete segmentos en CSS, los apagados se intuyen como en un cristal líquido real y la retroiluminación se enciende al enfocar el campo. Los números entran por la derecha, céntimos primero, como en los datáfonos, y nadie tiene que escribir la coma.
Tiñe el cristal y los segmentos con los dos colores para conseguir una pantalla verde, gris o ámbar. Funciona bien en pantallas de propina, apps de gastos y demos de punto de venta, junto a un único botón grande de confirmar.