lol

body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES http://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ visibility: hidden; position: absolute; } /* RADIO & CHECKBOX STYLES */ .rad > i, .ckb > i{ /* DEFAULT STYLE */ display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } /* CHECKBOX OVERWRITE STYLES */ .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:checked + i{ /* (RADIO CHECKED) STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i:after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:checked + i:after{ /* (RADIO CHECKED) STYLE */ margin-left: 11px; background: orange; } Radio 1 Radio 2
Checkbox 1 Checkbox 2