'Create toggle element without ::before and ::after

How can I create a toggle element without using pseduo ::before and ::after?

I want to create a toggle on an html page but without using the pseudo ::before and ::after.

I am currently using the method from w3Schools given here: https://www.w3schools.com/howto/howto_css_switch.asp

However, I don't want any ::before or ::after psuedo classes. I just want classes by alone, if possible. I tried rewriting my own class for this but didn't seem to work as intended.

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

I tried making a sliderbefore element myself without the psudeo and it didn't seem to work. (it was missing the small circle inside the toggle)

.sliderbefore {
          border-radius: 34px;
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          transition: .4s;
          box-shadow: 0 0 1px #2196F3;
        }
javascripthtmlcss


Solution 1:[1]

With classList.toggle:

    const a= document.getElementsByClassName('a');
    const b= document.getElementsByClassName('b');

    function changeColor(){ 
        a[0].classList.toggle("d");
        b[0].classList.toggle("e");

    }
    .a{
        position: absolute;
        border:1px solid red;
        width: 500px;
        height:300px;
        background:green;
    }

.b {
   left:51px;
    position: absolute;
    top:2px;
    float: right;
        border-radius:50%;
        width: 35px;
        height:35px;
        background: white;
        transition: all 0.1s;
}
.c {

    position: absolute;
    top:40px;
    left:130px;
        border-radius:20px;
        width: 90px;
        height:40px;
        background: #ced0d4;
}
.d{
background: blue;
}
.e{
    left:4px;
}
<div class="a">
    <div class="c" onclick="changeColor()">
        <div class="b"></div>   
    </div>  
</div>

Solution 2:[2]

I was able to create a toggle element by using javascript and html only instead of psuedo :before and :after

<html><head></head>
<script type="text/javascript">
function toggle(button) {
  if (button.value == "OFF") {
    button.value = "ON";
  } else {
    button.value = "OFF";
  }
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
       onclick="toggle(this);">
</form></body></html>

The element is an input which has a Value of ON. The Toggle function will switch the toggler on and off when clicked.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user2495207
Solution 2 PythonKiddieScripterX

Related Questions