I want to make an entire div cursor-pointer with inline CSS, but it currently only affects the whitespace around the child elements. I've tried position and z-index to no avail.
I do not and cannot have an external stylesheet.
<div className="cursor-pointer">
<checkbox>
<label>
</div>
Is there any way to do this without applying the cursor-pointer to every element? There's conditional logic as well so that would get pretty cluttered.
Since you allow the usage of JS, you could use querySelectorAll to select all child elements and apply the same class to it:
let el = document.querySelectorAll('.cursor-pointer *');
el.forEach(ele => ele.classList.add('cursor-pointer'));/* just for demonstration purpose */
.cursor-pointer {
cursor: not-allowed;
}<div class="cursor-pointer">
<input type="checkbox">
<label>Label</label>
</div>Using javascript, this solution loops through the parent and children and applies the cursor directly to each element.
let pointers = document.querySelectorAll(".cursor-pointer");
pointers.forEach(function(el) {
let children = el.querySelectorAll("*");
children.forEach(function(c) {
c.style.cursor = "pointer";
});
el.style.cursor = "pointer";
});<div class="cursor-pointer">
<input type="checkbox">
<label>A</label>
</div>