My HTML page is equipped with a toggle button that has its own CSS properties, but I am facing an issue where the size and length of the toggle button are not aligning with the initial position set.
Upon toggling the button, it tends to shift with a different left margin along with a change in its length.
I have included a snippet of the code that I have implemented:
.switch {
position: relative;
display: inline-block;
width: 120px;
height: 34px;
}
.switch input {
display: none;
}
/* More CSS properties... */
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML -->
<span class="EMEA">EMEA</span>
<span class="AMERICAS">AMERICAS</span>
<!--END-->
</div>
</label>I am seeking guidance on how to ensure that the EMEA toggle matches the length of the AMERICAS toggle without altering its current position.