Toggle the position of a button with checkbox

Question

This problem appears while trying to make a theme switcher scheme within a website when I click on the checkbox the translation movement in the X position doesn´t happen.

.alt-theme {
  height: 80vh;
  position: absolute;
  right: 10em;
}

.checkbox {
  opacity: 1;
  position: absolute;
}

.checkbox-label {
  background-color: #111;
  border-radius: 50px;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 26px;
  width: 50px;
  
  transform: scale(1.5);
}

.checkbox-label .ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 22px;
  width: 22px;
  transform: translateX(0);
  transition: transform 0.2s linear;
}

<div class="alt-theme">
  <label for="checkbox" class="checkbox-label">
    <i class="fa-solid fas fa-moon" style="color: #000; background: none;" />
    <i class="fa-solid fas fa-sun" style="color: #000; background: none;" />
    <div class="ball" />
  </label>
  
  <input type="checkbox" class="checkbox" />
</div>

The movement of this white ball inside the label of the checkbox.

button img

score 1 · Accepted Answer · edited Jun 08 '23 at 22:00

The approach you've taken is not bad, but there is room for improvement. Please read through the comments added to the code to better understand the underlying principles.

Solution

/* Just sets position of the switch element */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide input element --> You won't see the checkbox square like this */
.switch input {
  display: none;
}

/* Sets background */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  transition: 0.4s;
  cursor: pointer;
  border-radius: 34px;
}

/* Sets circle */
.slider:before {
  position: absolute;  
  width: 26px;
  height: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 34px;
  
  /* Sets icon when value of checkbox is false */
  font-family: "Font Awesome 5 Free";
  content: "\f186"; /* Font Awesome fas-moon */
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sets background when value of checkbox is TRUE */
.switch input:checked + .slider {
  background-color: #ccc;
}

/* Sets icon when value of checkbox is TRUE */
.switch input:checked + .slider:before {
  content: "\f185"; /* Font Awesome fas-sun */
  transform: translateX(26px);
}

<!-- Import FontAwesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<!-- Switch input -->
<label class="switch" for="checkbox">
  <!-- Store true/false value -->
  <input type="checkbox" id="checkbox" />
  <!-- Show circle with moon/sun icon -->
  <div class="slider round" />
</label>

More information

::before psuedoelement - MDN
CSS content property - MDN
Insert special character using :before pseudo class in css - Stack Overflow answer
CSS Pseudo-elements - FontAwesome docs

Links to extra reading are great, however, be sure to make sure it's from a reputable source. Please see [Why not w3schools.com?](https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com) and consider using more official documentation, such as [MDN](https://developer.mozilla.org/). — Michael M., Jun 08 '23 at 22:04

Toggle the position of a button with checkbox

1 Answers1

Solution

More information