Create toggle element without ::before and ::after

Question

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

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Apr 25 '22 at 18:38
Updated the question. - How can I create a toggle element without using pseduo ::before and ::after? — PythonKiddieScripterX, Apr 25 '22 at 18:47
Repeating the question is not clarifying anything really. You can use spans or whatever to create the element. — Paulie_D, Apr 25 '22 at 18:49
I did attempt to code this myself. Its in the post below at the bottom. Look at the `sliderbefore` class. That was in the original post as well. Did you see that part?? — PythonKiddieScripterX, Apr 25 '22 at 18:53
@PythonKiddieScripterX I mean, you could try using JS classToggle (https://www.w3schools.com/howto/howto_js_toggle_class.asp) but I don't know why you would want to go that route over just using the pseudo-classes unless you have something significantly more complicated planned for this. — AStombaugh, Apr 25 '22 at 19:01
@AStombaugh - I want to create a toggle without using psuedo ::before and ::after. If that isn't possible, let me know. I am just keeping the question more towards can I make a toggle without using psuedo ::before and ::after. If that isn't possible, that is totally cool. Its ONLY about this question, no other ulterior motives so to speak. Using JS `classToggle` only can turn off and on a class. It can't deal with psuedo classes because psuedo classes are not part of the dom. Its a different topic but I wanted to mention it as I don't think it may help me here, if that makes sense. — PythonKiddieScripterX, Apr 25 '22 at 19:05
@PythonKiddieScripterX Yes, see the link I posted and the example they provide using JS. — AStombaugh, Apr 25 '22 at 19:06
@AStombaugh I already read that before I posted this question. I updated my last comment but I will place it down here, just incase there was a delay. Using JS classToggle only can turn off and on a class. It can't deal with psuedo classes because psuedo classes are not part of the dom. Its a different topic but I wanted to mention it as I don't think it may help me here, if that makes sense. — PythonKiddieScripterX, Apr 25 '22 at 19:08
@AStombaugh after re-reading your post I think there is a confustion here. I LITEREALLY want to create a toggle. I don't need to toggle between classes. I am LITTERALLY trying to create a simple toggle button on a script. I think I found a stackoverflow that answers my question but I am still testing it. https://stackoverflow.com/questions/3047755/i-am-trying-to-make-a-simple-toggle-button-in-javascript If it does answer my question I will delete this one. — PythonKiddieScripterX, Apr 25 '22 at 19:10

score 0 · Answer 1 · answered Apr 25 '22 at 19:15

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.

score 0 · Accepted Answer · answered Apr 25 '22 at 19:26

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>

I don't know how you pulled of the css to make this work. The `classList` already made sense to me but didn't seem possible because they had psuedo classes for the before and after. However your classes DONT have psuedo classes which makes your perfect! — PythonKiddieScripterX, Apr 25 '22 at 19:32
I am going to give you the answer. Altough I answered my own question, your answer is more direct as to who I can create the toggle without the pseduo before and after. Thanks again — PythonKiddieScripterX, Apr 25 '22 at 19:33

Create toggle element without ::before and ::after

2 Answers2