How to Customize Checkbox Using CSS?

[Ashish Bisht]

Hi friends ,
I want to customize checkbox with the help of CSS. Mostly developers use javascript for customizing the look of the checkboxes but I want to use CSS. I hope any tech developer can help me over here in resolving the issue.

[devcake]

Hello,
You can hide the input using display: none; and add extra element which will take over the function of your checkbox. Than you can style that element to look like checkbox button you need.

Example:

HTML:

<span class="list-item">
  <label>
    <input type="checkbox" name="name" value="YourValueName">
    <span class="list-item-label">YourValueName</span>
  </label>
</span>

CSS:

.list-item input[type='checkbox'] {
    display: none;
}

.list-item input[type='checkbox'] + span {
    position: relative;
    padding-left: 12px;
    padding-right: 13px;
}

.list-item input[type='checkbox'] + span:before {
    position: absolute;
    left: -8px;
    top: 50%;
    width: 13px;
    height: 13px;
    display: inline-block;
    content: '';
    margin: 0;
    clear: none;
    cursor: pointer;
    background: #e1e1e1;
    margin-top: -7.5px;
}

.list-item input[type='checkbox']:checked + span:before  {
    background: #2f355b;
}

[simondgear]

Hi Buddy

I refer useful & helpful article.I hope it will solve your issue.

https://www.mindstick.com/blog/455/custom-checkbox-using-css

https://www.creativejui z.fr/blog/en/tutorials/customize-checkbox-and-radio-button-with-css


Thanks