x
1
2
3
4
5
<label class="btn btn--toggle"> <input type="checkbox" name="check_text_italic" id="check_text_italic" value="1" /> <span class="icon icon--italic" aria-hidden="true"></span> <span>Italic</span></label>1
2
3
4
5
<label class="btn btn--toggle"> <%= check_box_tag :check_text_italic %> <span class="icon icon--italic" aria-hidden="true"></span> <span>Italic</span></label>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.btn--toggle { --btn-background: var(--color-bg);}.btn--toggle [type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0);}.btn--toggle:has(:checked) { --btn-background: var(--color-border-light);}.btn--toggle:has(:focus-visible) { outline: var(--border-2) solid var(--color-selected-dark);}.card--toggle:has(:checked) { background-color: rgb(from var(--color-border-light) r g b / .5); border-color: var(--color-border-dark);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.