CSS Advanced

CSS User Interface

CSS includes a set of user-interface properties that control how interactive elements look and behave: resizing textareas, focus outlines, box sizing, and theming form controls and text carets. This guide covers each with runnable examples.

CSS User Interface Properties

These properties fine-tune the interactive layer of a page — how elements can be resized, how focus is indicated, and how native controls pick up your brand colour. They are small individually but together make forms and controls feel native and on-brand.

resize

resize controls whether the user can drag to resize an element. It is most useful on textareas. Values are none, both, horizontal and vertical. It requires overflow to be set to something other than visible.

Run this — drag the corner to resize

Example

<!DOCTYPE html>
<html>
<head>
<style>
  textarea {
    resize: vertical;
    width: 100%;
    padding: 10px;
    font: 14px sans-serif;
    box-sizing: border-box;
  }
</style>
</head>
<body>
  <textarea rows="3">Drag my bottom edge to resize me vertically.</textarea>
</body>
</html>

outline and outline-offset

An outline is drawn outside the border and does not take up layout space, so it never shifts surrounding content. It is the recommended way to show keyboard focus. outline-offset pushes the outline away from the element for breathing room.

Run this — tab to the input to see the outline

Example

<!DOCTYPE html>
<html>
<head>
<style>
  input {
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
  }
  input:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
  }
</style>
</head>
<body>
  <input type="text" placeholder="Click or tab here">
</body>
</html>

⚠️

Never remove focus outlines without providing a visible replacement. outline: none with no alternative makes a page unusable for keyboard-only users.

box-sizing

box-sizing decides whether width and height include padding and border. border-box makes sizing predictable because the declared width is the final rendered width. It is covered in depth in its own guide.

*, *::before, *::after {
  box-sizing: border-box;
}

accent-color

accent-color themes native form controls — checkboxes, radio buttons, range sliders and progress bars — with a single colour, without rebuilding them from scratch.

Run this — brand-coloured controls

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .form { accent-color: #db2777; font: 15px sans-serif; }
  .form > * { display: block; margin: 10px 0; }
</style>
</head>
<body>
  <div class="form">
    <label><input type="checkbox" checked> Subscribe</label>
    <label><input type="radio" name="r" checked> Option A</label>
    <input type="range" min="0" max="100" value="60">
    <progress value="0.6"></progress>
  </div>
</body>
</html>

caret-color

caret-color changes the colour of the blinking text-insertion cursor inside inputs and editable areas.

Run this — a hot-pink typing caret

Example

<!DOCTYPE html>
<html>
<head>
<style>
  input {
    caret-color: #e11d48;
    font-size: 18px;
    padding: 10px;
    border: 2px solid #e11d48;
    border-radius: 6px;
  }
</style>
</head>
<body>
  <input type="text" value="Watch the caret" autofocus>
</body>
</html>

Property	Controls	Common values
resize	User drag-resizing	none, both, horizontal, vertical
outline	Focus ring outside the border	3px solid color
outline-offset	Gap between outline and element	2px, 4px
box-sizing	What width/height include	content-box, border-box
accent-color	Native form-control tint	any color
caret-color	Text-insertion cursor colour	any color

💡

accent-color and caret-color let you brand forms with two short lines instead of building custom checkbox and input widgets from scratch.

Key points

resize lets users drag to resize elements, most usefully textareas.
outline shows focus without shifting layout; pair with outline-offset for spacing.
Never remove a focus outline without a visible replacement.
box-sizing: border-box makes declared widths the final rendered widths.
accent-color themes native controls and caret-color tints the typing cursor.

CSS User Interface