7 HTML CSS Checkbox Styles with Code

Checkbox Style	Description	Example
Basic Checkbox	A simple, customized checkbox
Rounded Checkbox	A checkbox with rounded corners
Animated Checkbox	A checkbox with animation effects
Switch Checkbox	A checkbox styled as a switch
Colorful Checkbox	A checkbox with custom colors
Emoji Checkbox	A checkbox that changes from sad to happy emoji

Basic Checkbox

<label class="checkbox-basic">
    Basic Checkbox
    <input type="checkbox">
    <span class="checkmark-basic"></span>
</label>

.checkbox-basic {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.checkbox-basic input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-basic {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.checkbox-basic:hover input ~ .checkmark-basic {
    background-color: #ccc;
}

.checkbox-basic input:checked ~ .checkmark-basic {
    background-color: #2196F3;
}

.checkmark-basic:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-basic input:checked ~ .checkmark-basic:after {
    display: block;
}

.checkbox-basic .checkmark-basic:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Rounded Checkbox

<label class="checkbox-rounded">
    Rounded Checkbox
    <input type="checkbox">
    <span class="checkmark-rounded"></span>
</label>

.checkbox-rounded {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.checkbox-rounded input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-rounded {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.checkbox-rounded:hover input ~ .checkmark-rounded {
    background-color: #ccc;
}

.checkbox-rounded input:checked ~ .checkmark-rounded {
    background-color: #2196F3;
}

.checkmark-rounded:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-rounded input:checked ~ .checkmark-rounded:after {
    display: block;
}

.checkbox-rounded .checkmark-rounded:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Animated Checkbox

<label class="checkbox-animated">
    Animated Checkbox
    <input type="checkbox">
    <span class="checkmark-animated"></span>
</label>

.checkbox-animated {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.checkbox-animated input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-animated {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    transition: all 0.3s ease;
}

.checkbox-animated:hover input ~ .checkmark-animated {
    background-color: #ccc;
}

.checkbox-animated input:checked ~ .checkmark-animated {
    background-color: #2196F3;
    transform: scale(1.1);
}

.checkmark-animated:after {
    content: "";
    position: absolute;
    display: none;
    transition: all 0.3s ease;
}

.checkbox-animated input:checked ~ .checkmark-animated:after {
    display: block;
}

.checkbox-animated .checkmark-animated:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.checkbox-animated input:checked ~ .checkmark-animated:after {
    opacity: 1;
}

Switch Checkbox

<label class="checkbox-switch">
    <input type="checkbox">
    <span class="slider-switch"></span>
</label>

.checkbox-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.checkbox-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider-switch {
    background-color: #2196F3;
}

input:focus + .slider-switch {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider-switch:before {
    transform: translateX(26px);
}

Colorful Checkbox

<label class="checkbox-colorful">
    Colorful Checkbox
    <input type="checkbox">
    <span class="checkmark-colorful"></span>
</label>

.checkbox-colorful {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.checkbox-colorful input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-colorful {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 5px;
}

.checkbox-colorful:hover input ~ .checkmark-colorful {
    background-color: #ccc;
}

.checkbox-colorful input:checked ~ .checkmark-colorful {
    background-color: #ff4081;
}

.checkmark-colorful:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-colorful input:checked ~ .checkmark-colorful:after {
    display: block;
}

.checkbox-colorful .checkmark-colorful:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Emoji Checkbox

<label class="checkbox-emoji">
    Emoji Checkbox
    <input type="checkbox">
    <span class="checkmark-emoji"></span>
</label>

.checkbox-emoji {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.checkbox-emoji input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-emoji {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
}

.checkbox-emoji:hover input ~ .checkmark-emoji {
    background-color: #ccc;
}

.checkmark-emoji:after {
    content: "😞";
}

.checkbox-emoji input:checked ~ .checkmark-emoji:after {
    content: "😊";
}

.checkbox-emoji input:checked ~ .checkmark-emoji {
    background-color: #4CAF50;
}

Facing issues? Have Questions? Post them here! I am happy to answer!

More Posts related to CSS,

More Posts: