CSS — User Interface

The cursor vocabulary

button       { cursor: pointer; }
.help        { cursor: help; }
.draggable   { cursor: grab; }
.dragging    { cursor: grabbing; }
.loading     { cursor: wait; }
.not-allowed { cursor: not-allowed; }
.text        { cursor: text; }

.custom { cursor: url("cursor.svg"), auto; }   /* fallback keyword required */

Default browser guesses are often wrong (divs-as-buttons show the default arrow) — set intent explicitly.

resize — user-controlled sizing

textarea {
    resize: vertical;      /* none · both · horizontal · vertical */
}

.panel {
    resize: horizontal;
    overflow: auto;        /* required companion! */
}

resize needs overflow other than visible to actually work — classic gotcha.

outline vs border recap for UI

/* Remove default, replace with branded ring — never just remove */
:focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
}

accent-color — theme native controls

:root {
    accent-color: #0d9488;
}

One line rebrands checkboxes, radios, range sliders and progress bars in modern browsers. The cheapest custom-form win available.

pointer-events — click passthrough

.overlay { pointer-events: none; }   /* clicks pass through to content below */

button.loading { pointer-events: none; }   /* block interaction entirely */

Also enables "click-through decoration" layers.

user-select

.copy-chunk  { user-select: all; }   /* one click selects whole block   */
.chrome-ui   { user-select: none; }  /* buttons/tabs: no accidental text select */

scroll-behavior & friends

html {
    scroll-behavior: smooth;     /* anchor jumps animate */
}

overscroll-behavior: contain;    /* stop scroll chaining to body in inner panels */
scrollbar-width: thin;           /* firefox slim scrollbars */

caret-color & touch-action

input {
    caret-color: #0d9488;    /* brand the blinking text cursor */
}

.carousel {
    touch-action: pan-x;     /* restrict gesture direction on touch */
}

Polishing checklist

• cursor reflects interactivity everywhere
• accent-color matches brand
• :focus-visible rings styled (never removed bare)
• resize + overflow pairs valid
• loading/disabled states block via pointer-events
• user-select: none on UI chrome, all on copyable snippets

Mini Practice

1. Custom cursors across a fake file-explorer (grab/grabbing/pointer).
2. Resizable side panel (horizontal) with proper overflow.
3. Brand every native control with accent-color.
4. Copy-to-clipboard block using user-select: all.
5. Modal overlay that lets clicks pass through its transparent edges.

Next: inline-block →