andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
snippets/toggle-switch.md
View File

@ -5,6 +5,15 @@ tags: visual,interactivity,beginner
Creates a toggle switch with CSS only.
- This effect is styling only the `<label>` element to look like a toggle switch, and hiding the actual `<input>` checkbox by positioning it offscreen. When clicking the label associated with the `<input>` element, it sets the `<input>` checkbox into the `:checked` state.
- The `for` attribute associates the `<label>` with the appropriate `<input>` checkbox element by its `id`.
- `.switch:after` defines a pseudo-element for the `<label>` to create the circular knob.
- `input[type='checkbox']:checked + .switch:after` targets the `<label>`'s pseudo-element's style when the checkbox is `checked`.
- `transform: translateX(20px)` moves the pseudo-element (knob) 20px to the right when the checkbox is `checked`.
- `background-color: #7983ff;` sets the background-color of the switch to a different color when the checkbox is `checked`.
- `.offscreen` moves the `<input>` checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
- `transition: all 0.3s` specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the `<label>`'s `background-color` and the pseudo-element's `transform` property when the checkbox is checked.
```html
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
```
@ -45,15 +54,3 @@ input[type='checkbox']:checked + .switch {
left: -9999px;
}
```
#### Explanation
This effect is styling only the `<label>` element to look like a toggle switch, and hiding the actual `<input>` checkbox by positioning it offscreen. When clicking the label associated with the `<input>` element, it sets the `<input>` checkbox into the `:checked` state.
- The `for` attribute associates the `<label>` with the appropriate `<input>` checkbox element by its `id`.
- `.switch:after` defines a pseudo-element for the `<label>` to create the circular knob.
- `input[type='checkbox']:checked + .switch:after` targets the `<label>`'s pseudo-element's style when the checkbox is `checked`.
- `transform: translateX(20px)` moves the pseudo-element (knob) 20px to the right when the checkbox is `checked`.
- `background-color: #7983ff;` sets the background-color of the switch to a different color when the checkbox is `checked`.
- `.offscreen` moves the `<input>` checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
- `transition: all 0.3s` specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the `<label>`'s `background-color` and the pseudo-element's `transform` property when the checkbox is checked.