Gelochtes Ticket als Checkbox

Ein Zugticket, bei dem das Abhaken ein Loch in den Abschnitt stanzt und das Papierplättchen herunterfällt.

Einstellungen

Hauptfarbe#d8452e

Zweitfarbe#f3ead6

Größe16px

Tempo1x

Text

Code

index.html

<label class="uvq02-tkt"><input type="checkbox"><span class="pz" aria-hidden="true"><i class="tg"></i><i class="hl"></i><i class="ch"></i></span><span class="bd"><small aria-hidden="true">MAD → LIS · 08:45</small><b>Ticket entwerten</b><i class="bc" aria-hidden="true"></i></span></label>

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 Checkboxen

Alle ansehen: Checkboxen

Checkbox mit gezeichnetem Haken

CheckboxenHTML + CSS

Runde Checkbox

CheckboxenHTML + CSS

Checkbox mit Konfetti

CheckboxenHTML + CSS

Aufgabe zum Durchstreichen

CheckboxenHTML + CSS

3D-Checkbox zum Umdrehen

CheckboxenHTML + CSS

Herz als Like-Button

CheckboxenHTML + CSS

Checkbox mit Häkchen und Federeffekt

CheckboxenHTML + CSS

Checkbox mit Kreisfüllung

CheckboxenHTML + CSS

Wofür du ihn nutzen kannst

Diese Checkbox ist als Zugticket aus Papier gezeichnet, mit perforiertem Abschnitt, Streckenzeile und kleinem Barcode. Beim Abhaken stanzt die Zange ein Loch in den Abschnitt, und das ausgestanzte Plättchen fällt trudelnd nach unten. Es ist HTML und CSS um eine echte Checkbox und passt zu Ticketentwertung, Einlass bei Events, Boarding-Schritten und Reise-Apps.

Die Hauptfarbe bestimmt die Stanzmarkierung und den entwerteten Text, die Zweitfarbe den Papierton. Ersetze die Strecke durch eigene Kürzel und stapele mehrere Tickets für Reisen mit Umstieg oder Gruppenbuchungen.