├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | input[type="checkbox"].toggle {
2 | opacity: 0;
3 | position: absolute;
4 | left: -9000px;
5 | top: -9000px;
6 | }
7 |
8 | input[type="checkbox"].toggle + label {
9 | position: relative;
10 | display: flex;
11 | align-items: center;
12 | cursor: pointer;
13 | }
14 |
15 | input[type="checkbox"].toggle + label::before {
16 | content: "";
17 | width: 2em;
18 | height: 1em;
19 | background-color: hsl(0, 80%, 90%);
20 | border-radius: 1em;
21 | margin-right: .25em;
22 | transition: background-color 200ms ease-in-out;
23 | }
24 |
25 | input[type="checkbox"].toggle + label::after {
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | position: absolute;
30 | content: "\2715";
31 | font-size: .5em;
32 | height: .9em;
33 | left: .2em;
34 | width: 1.8em;
35 | height: 1.8em;
36 | background-color: hsl(0, 80%, 60%);
37 | color: white;
38 | border-radius: 1em;
39 | transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
40 | }
41 |
42 | input[type="checkbox"].toggle:focus + label::before {
43 | outline: 1px solid black;
44 | }
45 |
46 | input[type="checkbox"].toggle:checked + label::before {
47 | background-color: hsl(100, 70%, 90%);
48 | }
49 |
50 | input[type="checkbox"].toggle:checked + label::after {
51 | content: "\2713";
52 | transform: translateX(100%);
53 | background-color: hsl(100, 70%, 60%);
54 | }
55 |
56 | input[type="checkbox"].toggle:disabled + label {
57 | color: #777;
58 | }
59 |
60 | input[type="checkbox"].toggle:disabled + label::before {
61 | background-color: #CCC;
62 | }
63 |
64 | input[type="checkbox"].toggle:disabled + label::after {
65 | background-color: #777;
66 | }
--------------------------------------------------------------------------------