1.check {
2 position: relative;
3 background: linear-gradient(90deg, #f19af3, #f099b5);
4 line-height: 0;
5 font-size: 25px;
6}
7
8.check input[type="checkbox"],
9.check label,
10.check label::before,
11.check label::after {
12 appearance: none;
13 display: inline-block;
14 font-size: inherit;
15 border-radius: 1em;
16 border: 0;
17 transition: .35s ease-in-out;
18 box-sizing: border-box;
19 cursor: pointer;
20}
21
22.check {
23 appearance: none;
24 display: inline-block;
25 border-radius: 1em;
26 border: 0;
27 transition: .35s ease-in-out;
28 box-sizing: border-box;
29 cursor: pointer;
30}
31
32.check label {
33 width: 2.2em;
34 height: 1em;
35 background: #d7d7d7;
36 overflow: hidden;
37}
38
39.check input[type="checkbox"] {
40 position: absolute;
41 z-index: 1;
42 width: .8em;
43 height: .8em;
44 top: .1em;
45 left: .1em;
46 background: linear-gradient(45deg, #dedede, #ffffff);
47 box-shadow: 0 6px 7px rgba(0,0,0,0.3);
48 outline: none;
49}
50
51.check input[type="checkbox"]:checked {
52 left: 1.3em;
53}
54
55.check input[type="checkbox"]:checked + label {
56 background: transparent;
57}
58
59.check label::before,
60.check label::after {
61 content: "· ·";
62 position: absolute;
63 overflow: hidden;
64 left: .50em;
65 top: .5em;
66 height: 1em;
67 letter-spacing: -.04em;
68 color: #9b9b9b;
69 font-family: "Times New Roman", serif;
70 z-index: 2;
71 font-size: .6em;
72 border-radius: 0;
73 transform-origin: 0 0 -.5em;
74 backface-visibility: hidden;
75}
76
77.check label::after {
78 content: "?";
79 top: .65em;
80 left: .6em;
81 height: .1em;
82 width: .35em;
83 font-size: .2em;
84 transform-origin: 0 0 -.4em;
85}
86
87.check input[type="checkbox"]:checked + label::before,
88.check input[type="checkbox"]:checked + label::after {
89 left: 2.55em;
90 top: .4em;
91 line-height: .1em;
92 transform: rotateY(360deg);
93}
94
95.check input[type="checkbox"]:checked + label::after {
96 height: .16em;
97 top: .55em;
98 left: 2.6em;
99 font-size: .6em;
100 line-height: 0;
101}
102