Checkmark not showing up when custom checkbox is clicked

user_14462468 0
Viewed 43

I want a custom checkbox (with an image of a tick, for example) to appear instead of the normal checkbox. But the checkmark does not appear now when the custom checkbox is clicked. How can this be fixed?

.checkbox-agreement input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox-agreement label {
  position: relative;
  padding: 0 0 0 30px;
  cursor: pointer;
}

.checkbox-agreement label:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 5px;
  left: 0;
  border: none;
  box-sizing: border-box;
  background: #f5f7f9;
  box-shadow: inset 0px 0px 5.7971px rgba(38, 31, 123, 0.05);
  border-radius: 2.89855px;
}

.checkbox-agreement label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s;
}

.checkbox-agreement input:checked + .checkbox-agreement label:before {
  background-image: url("...");
  background-repeat: no-repeat;
  background-position: center;
}
<div class="input-container">
  <span class="checkbox-agreement">
   <input type="checkbox" id="agreement">
   <label for="agreement">I have read understand and agree to Terms of
    Use, Privacy Policy, Disclosures&Disclaimers.</label>
    </span>
</div>

css html
2 Answers

The final CSS rule has an incorrect selector (.checkbox-agreement input:checked + .checkbox-agreement label:before ) - this sequence does not exist in the dom, it should be .checkbox-agreement input:checked + label:before

As the url for the image was simply ... I used a full href from the interwebs to illustrate the effect

.checkbox-agreement input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox-agreement label {
  position: relative;
  padding: 0 0 0 30px;
  cursor: pointer;
}

.checkbox-agreement label:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 5px;
  left: 0;
  border: none;
  box-sizing: border-box;
  background: #f5f7f9;
  box-shadow: inset 0px 0px 5.7971px rgba(38, 31, 123, 0.05);
  border-radius: 2.89855px;
  z-index: 100;
}

.checkbox-agreement label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s;
}

.checkbox-agreement input:checked + label:before {
  background-image: url(https://www.citypng.com/public/uploads/preview/-316225804095zek9ufozk.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:20px;
}
<div class="input-container">
  <span class="checkbox-agreement">
   <input type="checkbox" id="agreement">
   <label for="agreement">I have read understand and agree to Terms of
    Use, Privacy Policy, Disclosures&Disclaimers.</label>
    </span>
</div>

user_36036810

I really like the solution and explanation by Professor Abronsius, who answered this question first, so based on their fix, I refactored and simplified the HTML and CSS for the OP.

Please note that I changed the span in the HTML to a div.

.input-container {
  border: solid 0px black;
}

.checkbox-agreement input {
  z-index: -1;
  opacity: 0;
}

.checkbox-agreement label {
  cursor: pointer;
}

.checkbox-agreement label:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 6px;
  border: none;
  background: #ffffff;
  box-shadow: inset 2px 2px 6px grey;
  border: solid 1px black;
  border-radius: 3px;
}

/* The following fix is based on the answer given by Professor Abronsius to this question */

.checkbox-agreement input:checked + label:before {
  background-image: url(https://www.citypng.com/public/uploads/preview/-316225804095zek9ufozk.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:20px;
 
}
<div class="input-container">
  <div class="checkbox-agreement">
   <input type="checkbox" id="agreement">
   <label for="agreement">I have read understand and agree to the Terms of
    Use, Privacy Policy, Disclosures & Disclaimers.</label>
  </div>
</div>

user_185953210
Related