Checkbox Styling based on CSS - html

Question

I have a checkbox which should look as below,
If it is not selected it should be as below,
I have the following css with me
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 11px;
height: 6px;
background: rgba(0,0,0,0);
top: 10px;
left: 24px;
border: 1px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 20px;
width: 20px;
background-color: #1BAAD3;
border-radius: 4px;
margin-right: 8px;
}
When I uncheck the checkbox this is what I can see
I'm using angular-js to handle the event of select/unselect
HTML
<div class="form-check">
<input type="checkbox" ng-if="testKits" ng-model="testKits" class="form-check-input" id="testKits">
<label class="form-check-label form-label-text source-sans-pro" for="testKits">{{'Testkits' | translate}}</label>
</div>

Answer 1

Please see below snippet it may work for you:
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 11px;
height: 6px;
background: rgba(0,0,0,0);
top: 0px;
left: 6px;
border: 1px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 20px;
width: 20px;
background-color: #fff;
border-radius: 4px;
margin-right: 8px;
border: 2px solid #ddd;
}
input[type="checkbox"]:checked + label::before {
background-color: #1BAAD3;
border: 2px solid #1BAAD3;
}
<div class="form-check">
<input type="checkbox" class="form-check-input" id="testKits">
<label class="form-check-label form-label-text source-sans-pro" for="testKits">abc</label>
</div>