I want to color the border of checkbox. I have written the below css -
input[type=checkbox] {
height: 15px;
width: 15px;
border: 1px solid #007dc6;
-webkit-appearance: none;
}
This works for chrome only. I don't want to write browser specific code in css. The css should apply to all latest browsers.
Manipulating checkbox appearance is possible by hiding the default checkbox and styling our own checkbox using the :before element and :checked , not(:checked) selectors
An Example:
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox > input {
display: none;
}
.checkbox > label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox > [type="checkbox"] + label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square > [type="checkbox"] + label:before {
border-radius: 0px;
}
.checkbox.radio-rounded > [type="checkbox"] + label:before {
border-radius: 25%;
}
.checkbox.radio-blue > [type="checkbox"] + label:before {
border: 2px solid #ccc;
}
.checkbox > [type="checkbox"] + label:hover:before {
border-color: lightgreen;
}
.checkbox > [type="checkbox"]:checked + label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>