#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 border-radius: 9px; 12 display: block; 13 position: relative; 14 cursor: pointer; 15 font-size: 20px; 16 user-select: none; 17 box-shadow: rgba(139, 18, 113, 0.2) 0px 8px 24px; 18 background-image: linear-gradient(45deg, #f3d5f7, #fbf6e7, #e6fcf5); 19} 20 21/* Create a custom checkbox */ 22.checkmark { 23 border-radius: 9px; 24 position: relative; 25 top: 0; 26 left: 0; 27 height: 1.3em; 28 width: 1.3em; 29 background-color: linear-gradient(45deg, #f8e7fa, #fbf6e7, #e6fcf5); 30} 31 32/* Create the checkmark/indicator (hidden when not checked) */ 33.checkmark:after { 34 content: ""; 35 position: absolute; 36 display: none; 37} 38 39/* Show the checkmark when checked */ 40.container input:checked ~ .checkmark:after { 41 display: block; 42} 43 44/* Style the checkmark/indicator */ 45.container .checkmark:after { 46 left: 0.45em; 47 top: 0.25em; 48 width: 0.25em; 49 height: 0.5em; 50 border: solid rgb(233, 182, 182); 51 border-width: 0 0.15em 0.15em 0; 52 transform: rotate(45deg); 53}
2.3K views
2.3K views
Comments
MIT License