#e8e8e8
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
6.7K views
6.7K views
Comments
MIT License