Question 46148 in CSS Question posted in
Some basic documentation can be found here.

Add a checkmark to a toggle switch using HTML and CSS

I can’t seem to get a checkmark to display in the toggle. I have the following CSS:

/* CSS for toggle checkbox */

#toggle {
  display: none;
}

.toggle-checkbox label,
.toggle-checkbox label,
.toggle-checkbox label {
  transition: 400ms all ease-in-out 50ms;
  box-sizing: border-box;
  backface-visibility: hidden;
}

.toggle-checkbox {
  height: 25px;
  width: 50px;
  background: rgba(43, 43, 43, 1);
  position: relative;
  box-shadow: 0 0 2px rgba(43, 43, 43, 1);
  border-radius: 50px;
  transition: background 0.5s ease-out, box-shadow 0.5s ease-out;
}

#toggle:checked~.toggle-checkbox {
  background: rgba(73, 168, 68, 1);
  box-shadow: 0 0 2px rgba(73, 168, 68, 1);
}

.toggle-checkbox label::before {
  content: '';
  height: 10px;
  width: 2px;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 1px);
  transform: rotate(45deg);
  background: rgba(43, 43, 43, 1);
  border-radius: 5px;
}

.toggle-checkbox label::after {
  content: '';
  height: 2px;
  width: 10px;
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 5px);
  transform: rotate(45deg);
  background: rgba(43, 43, 43, 1);
  border-radius: 5px;
}

.toggle-checkbox label {
  height: 20px;
  width: 20px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  cursor: pointer;
  border-radius: 50px;
}

#toggle:checked~.toggle-checkbox label {
  left: 25px;
  transform: rotate(360deg);
}

#toggle:checked~.toggle-checkbox label::before {
  content: '';
  height: 8px;
  width: 2px;
  position: absolute;
  top: calc(50% - 4px);
  left: calc(50% - 1px);
  transform: rotate(45deg);
  background: rgba(73, 168, 68, 1);
  border-radius: 5px;
}

#toggle:checked~.toggle-checkbox label::after {
  content: '';
  height: 15px;
  width: 1px;
  position: absolute;
  top: calc(50% - 7.5px);
  left: calc(50% - 5px);
  transform: rotate(-45deg);
  background: rgba(73, 168, 68, 1);
  border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<h2>rolling toggle</h2>
<input type="checkbox" id="toggle" />
<div class="toggle-checkbox">
  <label for="toggle"></label>
</div>

I would like to add a checkmark to the switch when it is toggled on.

I have tried adding a checkmark using CSS, but I’m having trouble positioning it correctly. Can someone tell me how to add a checkmark to the toggle switch, and make it displays correctly?

Thank you for your help!

Tags:

2

Answers


  1. 0

    It seems it had some position-related issue and nothing else ( If I understood your problem though)

        #toggle:checked~.toggle-checkbox label::after {
        content: '';
        height: 15px;
        width: 1px;
        position: absolute;
        top: calc(50% - 6.5px);
        left: calc(50% - -1px);
        transform: rotate(240deg);
        background: rgba(73, 168, 68, 1);
        border-radius: 5px;
    }
    #toggle:checked~.toggle-checkbox label::before {
        content: '';
        height: 8px;
        width: 2px;
        position: absolute;
        top: calc(50% - 3px);
        left: calc(50% - 6px);
        transform: rotate(159deg);
        background: rgba(73, 168, 68, 1);
        border-radius: 5px;
    }
    Login or Signup to reply.
  2. 0

    I do not know if this is the result you wanted but I managed to obtain a centered checkmark. I just played around with the position’s and rotate’s values.

    /* CSS for toggle checkbox */

#toggle {
  display: none;
}

.toggle-checkbox label,
.toggle-checkbox label,
.toggle-checkbox label {
  transition: 400ms all ease-in-out 50ms;
  box-sizing: border-box;
  backface-visibility: hidden;
}

.toggle-checkbox {
  height: 25px;
  width: 50px;
  background: rgba(43, 43, 43, 1);
  position: relative;
  box-shadow: 0 0 2px rgba(43, 43, 43, 1);
  border-radius: 50px;
  transition: background 0.5s ease-out, box-shadow 0.5s ease-out;
}

#toggle:checked~.toggle-checkbox {
  background: rgba(73, 168, 68, 1);
  box-shadow: 0 0 2px rgba(73, 168, 68, 1);
}

.toggle-checkbox label::before {
  content: '';
  height: 10px;
  width: 2px;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 1px);
  transform: rotate(45deg);
  background: rgba(43, 43, 43, 1);
  border-radius: 5px;
}

.toggle-checkbox label::after {
  content: '';
  height: 2px;
  width: 10px;
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 5px);
  transform: rotate(45deg);
  background: rgba(43, 43, 43, 1);
  border-radius: 5px;
}

.toggle-checkbox label {
  height: 20px;
  width: 20px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  cursor: pointer;
  border-radius: 50px;
}

#toggle:checked~.toggle-checkbox label {
  left: 25px;
  transform: rotate(360deg);
}

#toggle:checked~.toggle-checkbox label::before {
  position: absolute;
  top: calc(50%);
  left: 50%;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(73, 168, 68, 1);
}

#toggle:checked~.toggle-checkbox label::after {
  height: 6px;
  width: 2px;
  position: absolute;
  top: calc(55%);
  left: calc(30%);
  transform: translateY(-50%) rotate(-40deg);
  background: rgba(73, 168, 68, 1);
} 
    <h2>rolling toggle</h2>
<input type="checkbox" id="toggle" />
<div class="toggle-checkbox">
  <label for="toggle"></label>
</div>

    I took the liberty of refactoring what you wrote in order to remove redundant code.

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

Back To Top
Search