EN
CSS - style input checkbox (HTML element)
3
points
In this article, we would like to show you how to style input checkbox using pure CSS.
Practical example
In this example, we use :checked pseudo class to switch between .default and .checked style changing SVG icon when the checkbox input is clicked.
In the below source code, you can configure own colors by changing:
#5f6368- label font color#767676- icon border color (unchecked state)#ffffff- icon background color (unchecked state)
check icon color (checked state)#0075ff- icon background color (checked state)
Source code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label.checkbox {
cursor: pointer;
}
svg.icon {
width: 13px;
height: 13px;
vertical-align: middle;
}
svg.icon.default {
display: inline-block;
}
svg.icon.checked {
display: none;
}
input.input:checked~svg.icon.default {
display: none;
}
input.input:checked~svg.icon.checked {
display: inline-block;
}
span.label {
margin: 0 0 0 3px;
vertical-align: middle;
font: 13px Arial;
color: #5f6368;
}
</style>
</head>
<body>
<label class="checkbox">
<input class="input" style="display: none" type="checkbox" />
<!--
You can add the following attributes to the input checkbox element:
- name="field-name"
- value="field-value"
- checked (or: checked="checked")
-->
<svg class="icon default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #767676" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<rect style="fill: #ffffff" width="14.7" height="14.7" x="1.203" y="1.203" ry="1.136" rx="1.136" />
</svg>
<svg class="icon checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #0075ff" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<path style="fill: #ffffff" d="m7.185 14.566 7.75-9.755-2.07-1.871-5.947 7.35-2.406-2.138-1.87 1.87z" />
</svg>
<span class="label">Label</span>
</label>
</body>
</html>
Multiple checkboxes
In this example, we create two checkbox inputs.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label.checkbox {
cursor: pointer;
}
svg.icon {
width: 13px;
height: 13px;
vertical-align: middle;
}
svg.icon.default {
display: inline-block;
}
svg.icon.checked {
display: none;
}
input.input:checked~svg.icon.default {
display: none;
}
input.input:checked~svg.icon.checked {
display: inline-block;
}
span.label {
margin: 0 0 0 3px;
vertical-align: middle;
font: 13px Arial;
color: #5f6368;
}
</style>
</head>
<body>
Website regulations:
<br />
<!-- 1st checkbox -->
<label class="checkbox">
<input class="input" style="display: none" type="checkbox" name="consent-1" />
<svg class="icon default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #767676" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<rect style="fill: #ffffff" width="14.7" height="14.7" x="1.203" y="1.203" ry="1.136" rx="1.136" />
</svg>
<svg class="icon checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #0075ff" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<path style="fill: #ffffff" d="m7.185 14.566 7.75-9.755-2.07-1.871-5.947 7.35-2.406-2.138-1.87 1.87z" />
</svg>
<span class="label">Consent 1</span>
</label>
<!-- END: 1st checkbox -->
<br />
<!-- 2nd checkbox -->
<label class="checkbox">
<input class="input" style="display: none" type="checkbox" name="consent-2" />
<svg class="icon default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #767676" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<rect style="fill: #ffffff" width="14.7" height="14.7" x="1.203" y="1.203" ry="1.136" rx="1.136" />
</svg>
<svg class="icon checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.105 17.105">
<rect style="fill: #0075ff" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<path style="fill: #ffffff" d="m7.185 14.566 7.75-9.755-2.07-1.871-5.947 7.35-2.406-2.138-1.87 1.87z" />
</svg>
<span class="label">Consent 2</span>
</label>
<!-- END: 2nd checkbox -->
</body>
</html>
Multiple checkboxes (with SVG components)
In this example, we use SVG components to avoid icons source code duplications.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label.checkbox {
cursor: pointer;
}
svg.icon {
width: 13px;
height: 13px;
vertical-align: middle;
}
svg.icon.default {
display: inline-block;
}
svg.icon.checked {
display: none;
}
input.input:checked~svg.icon.default {
display: none;
}
input.input:checked~svg.icon.checked {
display: inline-block;
}
span.label {
margin: 0 0 0 3px;
vertical-align: middle;
font: 13px Arial;
color: #5f6368;
}
</style>
</head>
<body>
<!-- SVG components definition -->
<svg style="display: none">
<symbol viewBox="0 0 17.105 17.105" id="input-checkbox-default">
<rect style="fill: #767676" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<rect style="fill: #ffffff" width="14.7" height="14.7" x="1.203" y="1.203" ry="1.136" rx="1.136" />
</symbol>
<symbol viewBox="0 0 17.105 17.105" id="input-checkbox-checked">
<rect style="fill: #0075ff" width="17.105" height="17.105" x="0" y="0" ry="2.005" rx="2.005" />
<path style="fill: #ffffff" d="m7.185 14.566 7.75-9.755-2.07-1.871-5.947 7.35-2.406-2.138-1.87 1.87z" />
</symbol>
</svg>
<!-- END: SVG components definition -->
Website regulations:
<br />
<!-- 1st checkbox -->
<label class="checkbox">
<input class="input" style="display: none" type="checkbox" name="consent-1" />
<svg class="icon default" xmlns="http://www.w3.org/2000/svg">
<use href="#input-checkbox-default" />
</svg>
<svg class="icon checked" xmlns="http://www.w3.org/2000/svg">
<use href="#input-checkbox-checked" />
</svg>
<span class="label">Consent 1</span>
</label>
<!-- END: 1st checkbox -->
<br />
<!-- 2nd checkbox -->
<label class="checkbox">
<input class="input" style="display: none" type="checkbox" name="consent-2" />
<svg class="icon default" xmlns="http://www.w3.org/2000/svg">
<use href="#input-checkbox-default" />
</svg>
<svg class="icon checked" xmlns="http://www.w3.org/2000/svg">
<use href="#input-checkbox-checked" />
</svg>
<span class="label">Consent 2</span>
</label>
<!-- END: 2nd checkbox -->
</body>
</html>