Question 188352 in Html Question posted in
Some basic documentation can be found here.

Html – Why doesn't the tick appear in my custom checkbox

Can anyone explain why the tick does not appear when I check my custom checkbox and help me fix the issue? I attempted to replicate the example from W3Schools and here is my code:

.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.left {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Hide the actual checkbox */
input[type=checkbox] {
  opacity: 0;
  margin-right: 4px;
}

/* Create a custom checkbox*/
.checkbox::before {
  content: "";
  border: none;
  border-radius: 2px;
  height: 16px;
  width: 16px;
  position: absolute;
  background-color: #737373;
}

.checkbox::after {
  content: "";
  border: 3px solid;
  border-top: 0;
  border-left: 0;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 10ms;
}

.checkbox input:checked ~ .checkbox::after {
  opacity: 1;
}
<div class="bottom">
  <div class="left">
    <div class="checkbox" style="margin-right: 3px;">
      <input type="checkbox">
    </div>
    <span>Remember me</span>
  </div>
  <span>Need help?</span>
</div>

Thanks in advance!

Tags:

2

Answers


  1. 0

    You had a issue in the last block of your css, exactly here:

    .checkbox input:checked ~ .checkbox::after {
  opacity: 1;
}

    Explanation:

    You were selecting an element by a class name checkbox using a precedence selector. The above css block meant: "Search for element with class checkbox and inside it search for an input element which is checked :checked and then search for element with class checkbox which is available after the selected input which is set checked or in other words search for element with class checkbox which is preceded by input:checked element but in your html you have no element after the input tag,hence it is not working. Also the :after and :before selectors overlaps the actual input checkbox hence you were not be able to click on it. This is solved by setting the z-index of both the selectors to -1.

    The corrected code snippet is as follows:

    <div class="bottom">
 <div class="left">
  <div class="checkbox" style="margin-right: 3px;">
   <input type="checkbox">
   <div class='customcheckbox'></div>
  </div>
  <span>Remember me</span>
 </div>
 <span>Need help?</span>
</div>
 
.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.left {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Hide the actual checkbox */
input[type=checkbox] {
  margin:0;
  width:16px;
  height:16px;
  opacity:0;
  cursor:pointer;
}

/* Create a custom checkbox*/
.customcheckbox::before {
  content: "";
  border: none;
  border-radius: 2px;
  height: 16px;
  width: 16px;
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
  background-color: #737373;
}

.customcheckbox::after {
  content: "";
  border: 3px solid;
  border-top: 0;
  border-left: 0;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg);
  opacity: 0;
  z-index:-1;
  transition: opacity 10ms;
}

.checkbox input:checked ~ .customcheckbox::after {
  opacity: 1;
}

    I hope I am clear with the explanation and the solution is working on your side as well. Cheers!

    Login or Signup to reply.
  2. 0

    There is many errors in your code :

    1. the "remember me" text should be in a label linked to the input or it won’t be checked
    2. if you hide completely the input, you should put it in display none, not opacity 0
    div {
    position: relative;
}
/* Hide the actual checkbox */
input[type="checkbox"] {
    display: none;
}
label {
    margin-left: 20px;
}
/* Create a custom checkbox*/
.checkbox::before {
    content: "";
    border: none;
    border-radius: 2px;
    height: 16px;
    width: 16px;
    position: absolute;
    background-color: #737373;
}
.checkbox::after {
    content: "";
    border: 3px solid;
    border-top: 0;
    border-left: 0;
    width: 4px;
    height: 9px;
    position: absolute;
    top: 1px;
    left: 5px;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 10ms;
}
.checkbox:has(:checked)::after {
    opacity: 1;
}
    <div class="checkbox" style="margin-right: 3px;">
      <input type="checkbox" id="remember">
    <label for="remember">Remember me</label>
</div>

    Also, you should add javascript to trigger click on the input when clicking on the before

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search