'Focus on outside rectangle of Toggle Switch on switch to true

Unable to focus on rectangle outside of toggle switch on selecting and I wanted to add the functionality to focus on the label class which is used for outside rectangle of toggle switch, but was completely stuck. I am trying to do, is if the switch is pressed, then focus should be on rectangle box. I am using below HTML and CSS. Any help appreciated.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.switch {
  position: relative;
  border: 1px solid rgb(112, 112, 112);
  display: flex;
  align-items: center;
  width: 280px;
  height: 70px;
  
}

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

.slider {
  left:234px;
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 0;
  bottom: 0;
  height: 24px;
  width: 40px;
  background-color: grey;
  -webkit-transition: 4s;
  transition: 4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
   border-radius: 50%;
  
}

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

.switch:hover{
  box-shadow: 0 0 10px red;
}

.switch:active{
border-radius: 5 10px;
}

.switch:focus{
background-color: #0064D2;
}


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




.switch label {
  position: absolute;
  left:2px;
  width: 234px;
  height: 22px;
  color: rgb(65, 65, 65);
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.15px;
  line-height: 22px;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <label for="toggle-switch"
        >Switch label 
        </label>
  <input type="checkbox" id="toggle-switch">
  <span class="slider round"></span>
</label>


</body>
</html>
htmlcss


Sources

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

Source: Stack Overflow

Solution Source

Related Questions