Cursor, Pointer Events, Selection and Resize
What Is It?
Interaction properties influence the pointer, hit testing, text selection, and whether users can resize an element.
Properties, Tags and Attributes Explained
cursor: Chooses a pointer shape such as pointer, text, or not-allowed.pointer-events: none excludes an element from pointer hit testing; it does not by itself prevent keyboard focus.user-select: Controls text selection behavior, such as text, none, or all.resize: Allows resizing in specified directions when applicable.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Select a whole token
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor, Pointer Events, Selection and Resize</title>
<style>
code { user-select: all; padding: 12px; display: inline-block; background: #f1f5f9; cursor: text; }
</style>
</head>
<body>
<p>Click this token to select it:</p><code>CSS-START-2026</code>
</body>
</html>What you see: The code requests whole-token text selection.
Example 2: Resizable notes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor, Pointer Events, Selection and Resize</title>
<style>
textarea { width: 240px; max-width: 100%; min-height: 80px; resize: vertical; overflow: auto; font: inherit; }
</style>
</head>
<body>
<label for="notes">Study notes</label><br><textarea id="notes">Resize me vertically.</textarea>
</body>
</html>What you see: Where the browser exposes a resize handle, the text area can grow vertically.
Example 3: Decorative overlay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor, Pointer Events, Selection and Resize</title>
<style>
.demo { position: relative; padding: 24px; }
.overlay { position: absolute; inset: 0; pointer-events: none; border: 4px dashed #93c5fd; }
</style>
</head>
<body>
<div class="demo"><button type="button">Still reachable through decoration</button><div class="overlay" aria-hidden="true"></div></div>
</body>
</html>What you see: The decorative overlay does not intercept clicks on the button.
When and Where to Use It
Use these properties for token selection, resizable text fields, and decorative overlays that should not block controls.
Common Mistake or Useful Tip
A cursor is only a visual hint. Use actual disabled controls when a control must be disabled.
Try It Yourself
Change resize to both and observe the available handle behavior.