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