Making checkbox transparent

Question

I've made a form with a checkbox. Now I need to make a checkbox appear as on the image:

What would be the best way to achieve this?

Also, they checkbox should be :checked once the label is clicked.

HTML:

<label>
    <input id="custom-checkbox" type="checkbox" required>
    Disclaimer: Click here if you are okay...
</label>

Hide the default checkbox and create own checkbox like styling next to the checkbox. Change the style of the custom checkbox when the origignal checkbox is checked by using `:checked` and `+` sibling selector. — Mr_Green, Jun 29 '16 at 11:19

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Like Mr_Green was saying, you could hide the checkbox and use the label. Make sure you have the label after the checkbox, not the label wrapping the checkbox.

SNIPPET

/* CheX */

input.chkrad {
  display: none;
}
input.chkrad + label {
  color: #111;
  font-size: 16px;
  background: url(http://i.imgur.com/clMMf.png) no-repeat; background-size: cover;
}
input.chkrad + label span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: -1px 4px 0 0;
  vertical-align: baseline;
  cursor: pointer;
}
input + label span {
  background: #fff;
  line-height: 100%;
}
input.X:checked + label span {
  padding: -3px 0 3px;
}
input.X:checked + label span:before {
  content: 'X';
  color: #F00;
  font-family: cursive;
  font-style: oblique;
  font-weight: 900;
}

<input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
<label for="chk3"><span></span> Disclaimer: Click anywhere on this text if you are okay...</label>

Making checkbox transparent

1 Answers1

SNIPPET