@keyframes hover-color { from { border-color: #c0c0c0; } to { border-color: #459be5; } } .magic-radio, .magic-checkbox { position: absolute; display: none; } .magic-radio[disabled], .magic-checkbox[disabled] { cursor: not-allowed; } .magic-radio + label, .magic-checkbox + label { position: relative; display: block; padding-left: 25px; cursor: pointer; vertical-align: middle; } .magic-checkbox + label{} .magic-radio + label:hover:before, .magic-checkbox + label:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color; } .magic-radio + label:before, .magic-checkbox + label:before { position: absolute; top: 5px; left: 0; display: inline-block; width: 16px; height: 16px; content: ''; border: 1px solid #c0c0c0; } .magic-radio + label:after, .magic-checkbox + label:after { position: absolute; display: none; content: ''; } .magic-checkbox + label,.magic-radio + label{ top: 4px; } .magic-radio[disabled] + label, .magic-checkbox[disabled] + label { cursor: not-allowed; color: #888; } .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-checkbox[disabled] + label:hover, .magic-checkbox[disabled] + label:before, .magic-checkbox[disabled] + label:after { cursor: not-allowed; } .magic-radio[disabled] + label:hover:before, .magic-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; animation-name: none; } .magic-radio[disabled] + label:before, .magic-checkbox[disabled] + label:before { border-color: #e4e4e4; } .magic-radio:checked + label:before, .magic-checkbox:checked + label:before { animation-name: none; } .magic-radio:checked + label:after, .magic-checkbox:checked + label:after { display: block; } .magic-radio + label:before { border-radius: 50%; } .magic-radio + label:after { top: 10px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: #459be5; } .magic-radio:checked + label:before { border: 1px solid #459be5; } .magic-radio:checked[disabled] + label:before { border: 1px solid #92ccff; } .magic-radio:checked[disabled] + label:after { background: #92ccff; } .magic-checkbox + label:before { border-radius: 3px; } .magic-checkbox + label:after { top: 6px; left: 6px; box-sizing: border-box; width: 6px; height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0px; border-left: 0;} .magic-checkbox:checked + label:before { border:1px solid #459be5; background: #459be5; } .magic-checkbox:checked[disabled] + label:before { border: #92ccff; background: #92ccff; }