Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Default -->
<label class="btn btn--toggle">
  <input type="checkbox" name="check_bold" id="check_bold" value="1" />
  <img aria-hidden="true" src="/assets/italic-659e5247.svg" width="16" height="16" />
  <span class="sr-only">Toggle italic</span>
</label>
<!-- Borderless -->
<label class="btn btn--toggle btn--borderless">
  <input type="checkbox" name="check_bold" id="check_bold" value="1" />
  <img aria-hidden="true" src="/assets/bold-13078f72.svg" width="16" height="16" />
  <span class="sr-only">Toggle bold</span>
</label>
<!-- With Text -->
<label class="btn btn--toggle">
  <input type="checkbox" name="check_text_italic" id="check_text_italic" value="1" />
  <img aria-hidden="true" src="/assets/italic-659e5247.svg" width="16" height="16" />
  <span>Italic</span>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%# Default %>
<label class="btn btn--toggle">
  <%= check_box_tag :check_bold %>
  <%= image_tag "italic.svg", size: 16, aria: { hidden: true } %>
  <span class="sr-only">Toggle italic</span>
</label>
<%# Borderless %>
<label class="btn btn--toggle btn--borderless">
  <%= check_box_tag :check_bold %>
  <%= image_tag "bold.svg", size: 16, aria: { hidden: true } %>
  <span class="sr-only">Toggle bold</span>
</label>
<%# With Text %>
<label class="btn btn--toggle">
  <%= check_box_tag :check_text_italic %>
  <%= image_tag "italic.svg", size: 16, aria: { hidden: true } %>
  <span>Italic</span>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn--toggle {
  [type="checkbox"] {
    position: absolute; clip: rect(0, 0, 0, 0);
  }
  &:has([type="checkbox"]:checked) {
    --btn-background: var(--color-secondary);
  }
  &:has(:focus-visible) {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.