1.2K views
1.material-checkbox { 2 display: flex; 3 align-items: center; 4 font-size: 16px; 5 color: #777777; 6 cursor: pointer; 7} 8 9.material-checkbox input[type="checkbox"] { 10 position: absolute; 11 opacity: 0; 12 width: 0; 13 height: 0; 14} 15 16.checkmark { 17 position: relative; 18 display: inline-block; 19 width: 20px; 20 height: 20px; 21 margin-right: 12px; 22 border: 2px solid #454B00; 23 border-radius: 4px; 24 transition: all 0.3s; 25} 26 27.material-checkbox input[type="checkbox"]:checked ~ .checkmark { 28 background-color: #2F3300; 29 border-color: #454B00; 30} 31 32.material-checkbox input[type="checkbox"]:checked ~ .checkmark:after { 33 content: ""; 34 position: absolute; 35 top: 2px; 36 left: 6px; 37 width: 4px; 38 height: 10px; 39 border: solid white; 40 border-width: 0 2px 2px 0; 41 transform: rotate(45deg); 42} 43 44.material-checkbox input[type="checkbox"]:focus ~ .checkmark { 45 box-shadow: 0 0 0 2px #dfec5065; 46} 47 48.material-checkbox:hover input[type="checkbox"] ~ .checkmark { 49 border-color: #C3CF34; 50} 51 52.material-checkbox input[type="checkbox"]:disabled ~ .checkmark { 53 opacity: 0.5; 54 cursor: not-allowed; 55} 56 57.material-checkbox input[type="checkbox"]:disabled ~ .checkmark:hover { 58 border-color: #4d4d4d; 59} 60
Gautammsharma
Gautam Sharma
MIT License