Search code examples
cssreactjssasstoggletoggleswitch

How to align a toggle in css

I'm trying to make a custom toggle button in react JS with CSS (using Sass). But now I am facing a problem, I can't align my switch button with the part behind.

The button is in position absolute, and the other one in position relative. I tried with flex (justify-content left, align items center) and I triend with various disply, (inline block and margin auto, inline-block and vertical align middle) but nothing worked for me.

AS you see in the pictures, my toggle is working but I am really triggering with the alignement.

Please excuse my english and my code, I am a beginner so if you have comment or if I can make thing easier let me know.

    <label className="toggle">
      <input
        type="checkbox"
        defaultChecked={isToggled}
        onClick={callback}
        name="ToggleSwitch"
        className="toggle__checkbox"
      />
      <span className="toggle__button" />
    </label>


@import '../../sass/variables';

.toggle {
  position: relative;
  width: 45px;
  height: 20px;



  &__checkbox {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked+.toggle__button {
      background-color: $primary-color;

      &:before {
        transform: translateX(20px);
        background-color: white;

      }
    }
  }

  &__button {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #646566;
    transition: 0.3s;
    border-radius: 30px;

    &::before {
      position: absolute;
      content: "";
      height: 25px;
      width: 25px;
      background-color: #B6B6B6;
      border-radius: 60px;
      transition: 0.3s;
    }
  }

}

enter image description here enter image description here

Solution

  • Just add transform:translateY(-50%); to .toggle__button::before and transform: translate(20px, -50%); to .toggle__checkbox:checked+.toggle__button:before

    :root{background-color:black;}

.toggle {
  position: relative;
  width: 45px;
  height: 20px;
  display:block;
}

.toggle__checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__checkbox:checked+.toggle__button {
  background-color: green;
}

.toggle__checkbox:checked+.toggle__button:before {
  transform: translate(20px, -50%);
  background-color: white;
}

.toggle__button {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #646566;
  transition: 0.3s;
  border-radius: 30px;
}

.toggle__button::before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  background-color: #B6B6B6;
  border-radius: 50%;
  transition: 0.3s;
  top:50%;
  transform:translateY(-50%);
}
    <label class="toggle">
  <input type="checkbox" name="ToggleSwitch" class="toggle__checkbox" />
  <span class="toggle__button"></span>
</label>