Cursors, selection and pointer events in CSS

The small properties that decide how a surface feels under the mouse.

.button { cursor: pointer; }
.button:disabled { cursor: not-allowed; opacity: 0.6; }

.overlay-decoration {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.line-number { user-select: none; color: #94a3b8; }

::selection {
  background: #bfdbfe;
}

How it works

1. cursor names the shape; not-allowed is the honest one for a disabled control.
2. pointer-events: none makes an element invisible to the mouse but not to the eye.
3. user-select: none stops a UI label being selected along with the text.

Keywords and builtins used here

• background
• button
• color
• cursor
• inset
• opacity
• position

The run, in numbers

Lines

14

Characters to type

252

Tokens

58

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 46 seconds.

Type this snippet

Step 3 of 3 in Styling content, step 25 of 26 in Selectors & the box model.

← Previous Next →