Create toggle element without ::before and ::after-CodePudding

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;
        }

CodePudding user response：

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.

CodePudding user response：

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 >
    <div  onclick="changeColor()">
        <div ></div>   
    </div>  
</div>