Custom style checkbox using CSS (no bootstrap)

Question

How do you style checkbox using only CSS? I want checkboxes with a background color of my choice, and appear a cross mark when they are checked, instead of a checkmark.

You need to show us some effort before you will get any help here, as it is the question does not have a specific problem to solve. Please make [mcve] — Esko, Apr 19 '17 at 05:51

score 0 · Answer 1 · answered Apr 19 '17 at 06:07

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: .1em; left: .3em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}


body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: .25em;
  font-weight: normal;
  text-align: center;
}
h2 {
  margin: .25em 0 2em;
  color: #aaa;
}
form {
  width: 7em;
  margin: 0 auto;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #4778d9;
}

<form action="#">
  <p>
    <input type="checkbox" id="test1" />
    <label for="test1">India</label>
  </p>
  <p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">USA</label>
  </p>
  <p>
    <input type="checkbox" id="test3" checked="checked" />
    <label for="test3">Japan</label>
  </p>

</form>

score 0 · Answer 2 · answered Apr 19 '17 at 06:07

<div class="checkbox">
  <input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
  <label for="offer_407">
     Below 500 Rs
  </label>
</div>

<style>
    .checkbox input[type="checkbox"]:checked + label:before {
        background-color: #424242;
        border-color: #424242;
         content: "\2713";
         display: inline-block;
         text-align: center;
         color:#fff;
    }
    li{
      list-style-type:none;
      margin-top:10px;
    }
    .checkbox label{
      cursor:pointer;
    }
    .checkbox label:before {
        content: "";
        cursor:pointer;
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
        border: 1px solid #cccccc;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
  </style>

for demo you can click here fiddle demo, and next time post some code which you tryed

score 0 · Answer 3 · answered Dec 05 '19 at 13:22

Had the same question - found a nice solution - check out answers in Stackoverflow - no one has this one nice trick.

Here it is

input[type=checkbox].agb {
all: unset;
/* rest of styles here */
}

It sets all Browser generated css styles to none and you are able to style the checkbox from scratch like you want to have it without any label hacks or something.

Cool?

I'll give you an example of a simple custom checkbox of mine.

input[type=checkbox].agb {
    all: unset;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    display: block;
    background: var(--color-2);
    float: left;
}

input[type=checkbox].agb:checked {
    background: var(--color-4);
    color: var(--color-2)
}

input[type=checkbox].agb:checked::after {
    content: "✔";
    display: block;
    font-size: 26px;
    padding-left: 5px;
}

Custom style checkbox using CSS (no bootstrap)

3 Answers3