HTML + CSSEingabefelder

Betrag im LCD-Display

Ein Betrag wie auf einem Solar-Taschenrechner: Sieben-Segment-Ziffern, Cent zuerst und griffige Gummitasten darunter.

Einstellungen

16px
1x

Code

<div class="uvq06-lcd"><label for="uvq06-lcd-in" class="lb">Betrag</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="Löschen">⌫</button></div></div></div>

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 Eingabefelder

Alle ansehen: Eingabefelder

Wofür du ihn nutzen kannst

Dieses Betragsfeld leiht sich das Display eines Taschenrechners. Jede Ziffer besteht aus sieben CSS-Segmenten, nicht aktive bleiben wie bei echtem Flüssigkristall schwach sichtbar, und die Hintergrundbeleuchtung geht beim Fokus an. Ziffern laufen von rechts ein, Cent zuerst, wie an Kartenterminals, sodass niemand ein Komma tippen muss.

Färbe Kristall und Segmente mit den beiden Farben ein, für ein grünes, graues oder bernsteinfarbenes Display. Es passt zu Trinkgeld-Screens, Ausgaben-Apps und Kassen-Demos, neben einem einzigen großen Bestätigen-Button.