Checkbox in Safari is overlaying the text. No issues in other browsers. Please see an image and the code code below. Other posts are not answering this. How do I fix that?
// Checkbox Div from React Component
<div id="chxContainer">
<p id="chxName">New:</p>
<label className="four wide column">
<input
className="ui checkbox"
type="checkbox"
value="{checked}"
onChange={() => setChecked((checked) => !checked)}
/>
</label>
</div>
/* below checkbox styles */
#chxContainer {
margin: 2.2rem 0rem 0 2rem;
}
#chxName {
position: absolute;
margin-top: 1rem;
}
/* below Global checkbox styles */
"@global": {
".ui.checkbox": {
margin: "1.1rem 0 0 0.5rem",
width: "5rem",
},
}