Stylize checkbox

Question

I’m trying to leave the checkbox this way:

But I’m not getting to leave the gray background as a pattern, and only when it’s marked will it be blue.

Follow my code:

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  background-color: #2196F3;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 5px;
  left: 9px;
}
span{
  margin: 0px 15px;
}

<p> <input type="checkbox"> <span>Um</span> </p>

<p> <input type="checkbox"> <span>Dois</span> </p>

<p> <input type="checkbox"> <span>Tres</span> </p>

<p> <input type="checkbox"> <span>Quatro</span> </p>

Answer 1

The <input type="checkbox"> allows little customization via CSS. The example passed in the accepted answer does not work in Firefox and Edge, for example. Chrome renders it, but shouldn’t, because <input> is a tag without content, therefore it is not likely to have the pseudo-elements ::before and ::after.

If you want a more robust solution, create a container around the checkbox and label and make your own design with CSS, in this way:

<div class="checkbox">
  <input type="checkbox" id="chk1" class="checkbox" name="chk">
  <label for="chk1">
    Checkbox 1
  </label>
</div>

.checkbox {
  display: inline-block;
  vertical-align: middle;
}
.checkbox input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.checkbox label {
  position: relative;
  padding-left: 2.2em;
  display: inline-block;
}
.checkbox label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1.5em;
  width: 1.5em;
  background: #FFF;
  margin-right: 0.5em;
  border: 1px solid #999;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.checkbox label::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: #FFF;
  opacity: 0;
  transition: all 0.2s ease;
}
.checkbox label:focus::before, .checkbox label:hover::before {
  background: #DDD;
}
.checkbox input:checked + label::before {
  background: #ff7212;
  border-color: #ff7212;
}
.checkbox input:checked + label::after {
  opacity: 1;
}

Live demo: https://jsbin.com/fuhuwun/1/edit?html,css,output

Answer 2

you can do it like that

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">