Library

Labels

Languages

Stylized checkbox

Arun - 26/10/2020 11:25 AM

Files 1

css
css
.cmp_check{-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;height: 18px;
    width: 18px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #fff; position: relative; cursor: pointer; vertical-align: middle;}
 
.cmp_check:hover{border-color: #fff}
 
.cmp_check:checked {
    background: #fff;
    border-color: #fff;
}

.cmp_check:hover:before {
    content: "";
    display: block;
    border-left: 2px solid #B4BDC2;
    position: absolute;
    left: 3px;
    top: 4px;
    height: 4px;
    border-bottom: 2px solid #B4BDC2;
    width: 9px;
    transform: rotate(-45deg);
}
 
.cmp_check:checked:before {
    content: "";
    display: block;
    border-left: 2px solid #1DA1F3;
    position: absolute;
    left: 3px;
    top: 4px;
    height: 4px;
    border-bottom: 2px solid #1DA1F3;
    width: 9px;
    transform: rotate(-45deg);
}