Unstyled checkboxes do not look good in some websites. Depends on the design, we need to style it by different way. One nice approach is to use only CSS3 and HTML. I will show how to do it.
The method
The key is to know :checked pseudo element. We have to show the checkbox only if it's checked.
- Put all the checkboxes with display: none.
- Apply CSS sytle only when it's checked.
- Add additional CSS style.
For example:
HTML
<form>
<label>
<input type="checkbox" name="" value=""/>
<span>Click me</span>
</label>
</form>CSS
body {
background-color: black;
} form {
text-align: center;
padding-top: 5%
}
input[type=checkbox] {
display:none;
}
span {
border:2px solid rgba(250, 206, 14, 0.9);
border-radius:5%;
font-weight:100;
color:rgba(250, 206, 14, 0.9);
font-size: 1rem;
text-decoration:none;
font-family: Arial;
text-align:center;
width:150px;
height:50px;
line-height:50px;
cursor:pointer;
display:inline-block;
-webkit-transition:background-color 150ms ease-in;
-moz-transition:background-color 150ms ease-in;
-ms-transition:background-color 150ms ease-in;
-o-transition:background-color 150ms ease-in;
transition:background-color 150ms ease-in;
}
span:hover {
background-color:rgba(250, 206, 14, 0.9);
color:#fff;
}
input[type=checkbox]:checked + span {
text-decoration:none;
border-radius:10%;
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAY
AAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//
PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNS
CvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GN
wRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj
4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnf
AkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfO
QK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAf
xVJu09xiWENuMxCrUaNhCBBgAOAVfjA
La5TLAAAAAElFTkSuQmCC) no-repeat 88% center;
background-size:15px 15px;
}
input[type=checkbox]:checked:hover + span {
color:#fff;
text-decoration:none;
border-radius:5%;
background:rgba(250, 206, 14, 0.9) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAA
AA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA
S5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ym
g3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm
4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta
0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiT
Xbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeM
UIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7Yun
EBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 88% center;
background-size:15px 15px;
}
Browser support
This technique has very nice support, IE9+. IE8 has partial support, you can view it in Can I use.