I created a toggle switch in HTML with a label and styled it using CSS. Everything works fine when the toggle is on, but the issue arises when it's off – the label overlaps with the switch.
https://i.sstatic.net/jT4oO.png
https://i.sstatic.net/X7hdA.png
The problem seems to be that the toggle container doesn't layer on top of the label element. I've tried adjusting the z-index and positions, but haven't been able to resolve it yet. The project is built with React, and the CSS styling is done in the pre-made App.css file.
Tools used: React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code:
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
...
(Skipping rest of the CSS code for brevity)
...