Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript.
Here is the code snippet that I experimented with:
function genre_itemclick(item){
if(item.classList.contains('light_blue_border_button')) {
item.classList.remove('light_blue_border_button');
item.classList.add('light_blue_button');
}
else{
item.classList.remove('light_blue_button');
item.classList.add('light_blue_border_button');
}
}.light_blue_border_button{
background-color: #FFFFFF;
border-radius: 10px;
height: 30px;
border:2px solid #3CDEBF;
text-align: center;
color: #3CDEBF;
}
.light_blue_button{
background-color: #3CDEBF;
border:2px solid #3CDEBF;
height: 30px;
border-radius: 10px;
text-align: center;
color: #ffffff;
}<div class="light_blue_border_button" onclick="genre_itemclick(this)">test</div>However, I wanted to achieve this functionality using only HTML and CSS. So, I made another attempt in the following way. But unfortunately, it didn't work as expected.
body {padding:60px;}
.toggle-switch input[type=checkbox] {display:none}
.toggle-switch label {cursor:pointer;}
.toggle-switch label{
background-color: #FFFFFF;
border-radius: 10px;
height: 30px;
border: 2px solid #3CDEBF;
}
.toggle-switch input[type="checkbox"]:checked + label{
background-color: #3CDEBF;
border: 2px solid #3CDEBF;
height: 30px;
border-radius: 10px;
text-align: center;
color: #ffffff;
}<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label>
Test
</label>
</div>If anyone has insights or suggestions on how to resolve this issue, your help would be greatly appreciated. Thank you in advance!