Video wird geladen...
Video konnte nicht geladen werden
:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。 子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。 参考: #CSS #cssnite #朝までマークアップ
33,703 Aufrufe • vor 1 Jahr •via X (Twitter)
0 Kommentare
Keine Kommentare verfügbar
Kommentare vom Original-Post werden hier angezeigt
