HTML + CSSCheckboxen

Prise-Salz-Checkbox

Ein Rezeptschritt: Der Salzstreuer kippt, schüttelt sich zweimal und die Körner fallen in die Schale, dann kommt der Haken.

Einstellungen

16px
1x

Code

<label class="uvq02-slt"><input type="checkbox"><span class="bx" aria-hidden="true"><span class="sk"><i></i></span><b style="--i:0;--x:-0.35em"></b><b style="--i:1;--x:0.11em"></b><b style="--i:2;--x:0.19em"></b><b style="--i:3;--x:-0.14em"></b><b style="--i:4;--x:0.11em"></b><b style="--i:5;--x:-0.28em"></b><b style="--i:6;--x:-0.19em"></b><b style="--i:7;--x:-0.07em"></b><b style="--i:8;--x:-0.07em"></b><span class="dh"></span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span></span>Eine Prise Salz hinzufügen</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

Wofür du ihn nutzen kannst

Für Rezeptschritte gemacht, kombiniert diese Checkbox einen gläsernen Salzstreuer mit Metalldeckel und eine kleine Keramikschale. Beim Abhaken kippt der Streuer über die Schale, schüttelt sich zweimal, neun Körner fallen nacheinander hinein, und dann erscheint ein Haken, während der Rand die Hauptfarbe annimmt. Beim Überfahren neigt sich der Streuer leicht. Passt zu Koch-Apps, Zutatenlisten und Essensplanern.

Die Hauptfarbe ist der Haken und der Schalenrand, die Zweitfarbe die Keramik. Ersetze die Beschriftung durch jeden Zutatenschritt, etwa etwas Pfeffer oder einen Löffel Zucker, und stapele mehrere Schritte, um einem Rezept zu folgen.