CODEWITHSUNDEEP
htmlcss
userName
userName

Reputation: 955

Checkmark not showing up when custom checkbox is clicked

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>

Upvotes: 1

Views: 83

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33823

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>

Upvotes: 1

Related Questions