pointer-events
The pointer-events CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.
Overview
The pointer-events CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 4 | 18 | 3.2 | |
html elements Applies to HTML elements | 2 | 12 | 3.6 | 4 | 18 | 3.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Make decorative overlay transparent on click */
.decorative-overlay {
pointer-events: none;
}
/* Disabled button */
.button:disabled {
pointer-events: none;
opacity: 0.5;
}Live demo
Use cases
Using pointer-events
The pointer-events CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features