HTML + CSSCheckboxen
Aufgabe mit rundem Haken
Der runde Haken füllt sich, eine Linie streicht die Aufgabe durch und der Text wird blasser.
Einstellungen
16px
1x
Code
<label class="uv-ck2t"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Design fertigstellen</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.
Mehr aus Checkboxen
Wofür du ihn nutzen kannst
Gemacht für To-do-Listen: offene Punkte in einer Projektmanagement-App, die Packliste für den Urlaub oder die Schritte eines Rezepts, die du beim Kochen abhakst. Die Linie zieht über den Text, der Eintrag verblasst, und was noch offen ist, springt sofort ins Auge. Eine To-do-Checkbox mit Durchstreichen in HTML und CSS.
Am besten klappt das mit kurzen Einträgen. Bricht eine Aufgabe auf zwei Zeilen um, wird nur die erste durchgestrichen. Also lieber knapp formulieren oder der ganzen Liste etwas mehr Breite geben.