CSS Text change when switch is On/Off

Hi Experts,
I was wondering if it's possible to change the text next to the switch with CSS. If yes, would you please show me how? I'd like the result pictured on the image below:

I would appreciate your help.

CSS

Last Comment

Sam Jacobs

8/22/2022 - Mon

Sam Jacobs

4/22/2020

How is that switch created? Via vanilla HTML/CSS?
A JavaScript library (jQuery)?
Do you have a snippet of the code surrounding the switch?
That will determine the best way to modify the text.

Stefan Motz

4/22/2020

ASKER

I'm sorry, I forgot to attach the code. This is my Switch page:

<html>
<head>
<title>Switch</title>
<style>
p.toggle{ 

  position: absolute;
  top: 103px;
  left: 80px;
  font-size: 22px;
  }
  
.switch {
  
  position: absolute;
  top: 120px;
  left: 10px;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.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: #755BB5;
}

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

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

</style>
</head>

<body>
 <label class="switch">
   <input type="checkbox" checked>
   <span class="slider round"></span>
 </label>
<p class="toggle">Turn On</p>

</body>
</html>

Open in new window

Sam Jacobs

4/22/2020

Still working to see if I can get it with CSS only, but if a little JavaScript is ok, try this (also added IDs):

<html>
<head>
<title>Switch</title>

<script type="text/javascript">
function checkVal(cb) {
  document.getElementById('toggle').innerHTML = cb.checked ? "Turn Off" : "Turn On";
}
</script>

<style>
p.toggle { 
  position: absolute;
  top: 103px;
  left: 80px;
  font-size: 22px;
  }
 
.switch {  
  position: absolute;
  top: 120px;
  left: 10px;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.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: #755BB5;
}

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

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

</style>
</head>

<body>
 <label class="switch">
   <input id="cb" type="checkbox" onclick="checkVal(this);">
   <span class="slider round"></span>
 </label>
 <p id="toggle" class="toggle">Turn On</p>

</body>
</html>

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Stefan Motz

4/22/2020

ASKER

Thank you so much for your help! I also came up with a JavaScript solution, but I'm so curious if it can be done with CSS only.
This is my JavaScript version:

<html>
<head>
<title>Switch</title>
<style>
p.toggle{ 

  position: absolute;
  top: 103px;
  left: 80px;
  font-size: 22px;
  }
  
.switch {
  
  position: absolute;
  top: 120px;
  left: 10px;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.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: #755BB5;
}

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

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

</style>
</head>

<body>
 <label class="switch">
   <input type="checkbox" checked onclick="myFunction()">
   <span class="slider round"></span>
 </label>
<p class="toggle" id="myDIV">Turn Off</p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Turn Off") {
    x.innerHTML = "Turn On";
  } else {
    x.innerHTML = "Turn Off";
  }
}
</script>

</body>
</html>