Prisma saysuser-select controls whether text can be highlighted; pointer-events toggles click-through.
user-select: none stops text selection (useful on buttons so a double-click doesn't highlight labels). pointer-events: none makes an element ignore mouse events entirely (clicks pass through), and auto restores them — handy for overlays and disabled states.
Power-ups you unlock
user-select:none prevents text highlighting
pointer-events:none lets clicks pass through
Restore with user-select:auto / pointer-events:auto
Use on UI chrome, overlays, disabled elements
Jank the Janitor attacks — common mistakes
Disabling selection on actual content text
pointer-events:none on something users must click
Trapping focus/interaction unexpectedly
Boss battleMake a button label unselectable and a decorative overlay click-through.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>button{user-select:none;font:inherit;padding:10px 16px}.overlay{pointer-events:none;color:#8a82b0}</style></head><body style="background:#06040d;color:#e6e0ff;padding:20px"><button>can’t select my label</button><p class="overlay">clicks pass through me</p></body></html>