How to change Checkbox UI Using Html and CSS? - html

Question

<input type='checkbox' name='chkbox'/>
I want to change the checkbox height and width and also background color if possible

Answer 1

You can look at this piece of code for starters.
It uses the before element to create a custom shape and hide the default checkbox for two states 'checked' and 'unchecked'
Also give a label for that corresponding checkbox so that clicking this custom shape will actually trigger the hidden default checkbox.
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>