Jason Wu Jason Wu - 11 months ago 110
Less Question

css position for pseudo class in checkbox not working

I need to create a tick in a checkbox using CSS and not an image.

I can see the green '✔' showing up correctly. but the top and left in css is just not working the tick sign is always stuck at the upper left corner at the checkbox and I want it at the middle. Why is the content and color property working but left and top not working?

Answer Source

Top and left doesn't work with static element, you need to specify a relative, fixed or absolute position in order to use these property. You can try this :

input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
    background-position: 0 -800px;
    content: '✔';
    font-size: 25px;
    margin: auto;
    top: 15px;
    left: 250px;
    color: green;
    position: relative;
}

A full code :

input[type=checkbox]:focus+.icon {
  background-position: 0 -822px;
}

input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
  background-position: 0 -856px;
  background-color: #2196F3;
  display: block;
}

input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
  background-position: 0 -800px;
  content: '✔';
  font-size: 25px;
  margin: auto;
  top: 5px;
  left: 50%;
  margin-left:-12px;
  color: green;
  position:relative;
}

input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
  background-position: 0 -890px;
}

,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
  background-position: 0 15.3%;
}

&.hasError .icon {
  background-position: 0 -890px;
}
<input type="checkbox" required="required" name="terms" id="termsAgree" auto-required="true">
<span class="icon"></span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download