CSS User Interface

User Interface

CSS includes properties that improve user interaction and UI behavior. These are especially useful for forms, panels, editors, and draggable/resizable layouts.

In this section, you will learn practical UI-related properties:

• resize – allow the user to resize an element
• outline-offset – improve focus visibility
• user-select – control text selection
• cursor – communicate interactivity

Resize

The resize property lets the user resize an element. It works when overflow is not visible (commonly auto).

.panel {
  width: 360px;
  height: 200px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;

  overflow: auto;
  resize: both;
}

Common values:

• none – default
• both – resize horizontally and vertically
• horizontal – resize only width
• vertical – resize only height

Outline Offset

outline-offset moves the outline away from the element. This is often used for better keyboard focus styles.

.button:focus-visible {
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 3px;
}

Tip: Prefer :focus-visible instead of :focus for cleaner focus styling (shows mainly for keyboard users).

User Select

user-select controls whether text can be selected. This is useful for buttons, draggable UI, tags, and controls where selection feels like a bug.

.btn, .chip, .drag-handle {
  user-select: none;
}

Common values:

• auto – default
• none – disable selection
• text – force selectable text
• all – select all text on click

Cursor

The cursor property changes the mouse pointer and helps users understand what is clickable or draggable.

.btn { cursor: pointer; }
.help { cursor: help; }
.drag { cursor: grab; }
.drag:active { cursor: grabbing; }
.disabled { cursor: not-allowed; }

Summary

• resize enables user resizing (works with non-visible overflow).
• outline-offset improves focus visibility and UI polish.
• user-select prevents unwanted text selection in controls.
• cursor communicates interactivity and improves UX.