Example treatment for a custom round checkbox.
A Pen by Matt Smith on CodePen.
Example treatment for a custom round checkbox.
A Pen by Matt Smith on CodePen.
<div class="container"> | |
<div class="round"> | |
<input type="checkbox" id="checkbox" /> | |
<label for="checkbox"></label> | |
</div> | |
</div> |
.round { | |
position: relative; | |
} | |
.round label { | |
background-color: #fff; | |
border: 1px solid #ccc; | |
border-radius: 50%; | |
cursor: pointer; | |
height: 28px; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 28px; | |
} | |
.round label:after { | |
border: 2px solid #fff; | |
border-top: none; | |
border-right: none; | |
content: ""; | |
height: 6px; | |
left: 7px; | |
opacity: 0; | |
position: absolute; | |
top: 8px; | |
transform: rotate(-45deg); | |
width: 12px; | |
} | |
.round input[type="checkbox"] { | |
visibility: hidden; | |
} | |
.round input[type="checkbox"]:checked + label { | |
background-color: #66bb6a; | |
border-color: #66bb6a; | |
} | |
.round input[type="checkbox"]:checked + label:after { | |
opacity: 1; | |
} | |
html, body { | |
height: 100%; | |
margin: 0; | |
} | |
body { | |
background-color: #f1f2f3; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.container { | |
margin: 0 auto; | |
} |