css - CSS User Interface

When we talk about CSS User Interface (UI) properties, we’re referring to a set of CSS properties that control the appearance and behavior of user interface elements, like scrollbars, cursors, outlines, text selection, and user interactions. These are often grouped under CSS UI Module specifications. They let you fine-tune how users interact with elements, not just how they look visually.

1. Cursor Control

You can change the mouse cursor when hovering over elements:

button {
  cursor: pointer; /* Shows a hand pointer */
}

input {
  cursor: text; /* Shows a text cursor */
}

.disabled {
  cursor: not-allowed; /* Shows a "blocked" icon */
}

Common values:

• default → arrow

• pointer → hand

• text → I-beam

• move → move icon

• wait → loading icon

• not-allowed → blocked

2. User Selection

Control whether text can be selected or copied:

p {
  user-select: none; /* User cannot select this text */
}

p.selectable {
  user-select: text; /* Default behavior */
}

Values:

• none → cannot select

• text → selectable text

• all → selects all content at once

• contain → selection limited to element

3. Outline and Focus

Outlines are part of the UI for accessibility and focus indication:

button:focus {
  outline: 2px solid #2196f3; /* Highlight on keyboard focus */
  outline-offset: 2px;
}

• outline → similar to border but doesn’t affect layout

• outline-offset → distance from element border

4. Scrollbars

Some browsers let you style scrollbars (UI):

/* WebKit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #4caf50;
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

• ::-webkit-scrollbar → the whole scrollbar

• ::-webkit-scrollbar-thumb → draggable part

• ::-webkit-scrollbar-track → track background

5. Resize Control

Control whether elements can be resized by the user:

textarea {
  resize: both; /* Can resize horizontally and vertically */
}

textarea.no-resize {
  resize: none; /* Cannot resize */
}

Values:

• none → no resize

• both → horizontal + vertical

• horizontal → only horizontal

• vertical → only vertical

6. Appearance

The appearance property allows you to override native styles for form elements:

input[type="checkbox"] {
  appearance: none; /* Remove default checkbox style */
  width: 20px;
  height: 20px;
  border: 2px solid #4caf50;
  border-radius: 4px;
  background-color: white;
}

input[type="checkbox"]:checked {
  background-color: #4caf50;
}

• appearance: none → remove browser’s default UI

• auto → default styling

• Often used for custom checkboxes, radio buttons, and sliders

7. Pointer Events

Control how elements interact with mouse or touch:

.button-disabled {
  pointer-events: none; /* Clicks are ignored */
  opacity: 0.6;
}

• auto → default behavior

• none → ignore pointer events

8. Outline of CSS UI Properties Table

Use Cases

• Improving UX for buttons, forms, and inputs

• Creating custom checkboxes, sliders, and scrollbars

• Enhancing keyboard accessibility and focus styles

• Controlling how text and elements interact with users