Toggle switch button - how to set responsive measurements? - html

Question

I've created This toggle button, and i can't set it's size to percentage - so it could be responsive. i was manage to set it's text to viewport width and height - and it's working well, but i don't want the button in viewport measurements....
perhaps ::before and ::after cannot receive measurements in percentage?
Html:
<div class="cont">
<div class="box">
<div class="material-switch">
<input id="someSwitchOptionDefault" name="someSwitchOption001"
type="checkbox" />
<label for="someSwitchOptionDefault" class="label-default"><span
class="homme">Homme</span><span class="femme">Femme</span>
</label>
</div>
</div>
</div>
Css:
.cont {
padding: 50px;
background-color: #e9e9e9;
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
}
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > input[type="checkbox"] + label::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #333333;
text-align: right;
border: 1px solid #dcdcdc;
padding-left: 10px;
padding-right: 10px;
}
.material-switch > label::before {
background-color: #f6f6f6;
border-radius: 16px;
height: 24px;
margin-top: -12px;
position: absolute;
width: 100px;
}
.material-switch > label::after {
/*--button---*/
content: "";
font-size: 18px;
background-color: #fff;
border-radius: 15px;
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
width: 73px;
border: 1px solid #dcdcdc;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background-color: #f6f6f6;
content: "\f221";
color: "blue";
font-family: FontAwesome;
text-align: left;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background-color: #fff;
left: 30px;
}
.femme {
display: none;
}
.material-switch > input[type="checkbox"]:checked + label>span.homme {
display: none;
}
.material-switch > input[type="checkbox"]:checked + label>span.femme {
display: block;
}
.homme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 1vw;
position: absolute;
top: -8px;
left: 9px;
z-index: 999;
}
.femme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 1vw;
position: absolute;
top: -8px;
z-index: 999;
}
.material-switch > input[type="checkbox"]:checked + label .femme {
left: 41px;
}
.homme::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
.femme::before {
content: "\f221";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}

Answer 1

I see that in the css you have overridden lot of html DOM properties, like for <input> component. I would suggest you to use simple and elegant toggle buttons available with normal css.
You can check below toggle button examples:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
https://codepen.io/mburnette/pen/LxNxNg