CSS User Interface
CSS ships several properties that affect the user-interaction layer of the page — cursors, resize handles, scrollbar appearance, caret colour.
UI properties worth knowing
| Property | Purpose | Example |
|---|---|---|
cursor | Mouse cursor over the element. | pointer, not-allowed, grab |
resize | Whether textareas can be resized. | vertical, none |
caret-color | The text insertion line colour. | #04AA6D |
accent-color | Colour for native checkboxes, radios, range inputs. | #04AA6D |
user-select | Whether text can be selected. | none, text |
pointer-events | Whether the element receives mouse events. | none |
scroll-behavior | Smooth scrolling for in-page anchors. | smooth |
scrollbar-width | Thin or no scrollbar (Firefox). | thin |
scrollbar-color | Thumb & track colour (Firefox). | #04AA6D #f1f1f1 |
Branding native controls
CSS
:root { accent-color: #04AA6D; caret-color: #04AA6D; }
textarea { resize: vertical; }
.disabled-link { pointer-events: none; opacity: 0.5; }
.smooth-scroll { scroll-behavior: smooth; }
Tip: Set
accent-color on the :root and every checkbox, radio, and range slider on the site picks up your brand colour without per-component CSS.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS User Interface</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Apply your brand colour to native form controls.
:root {
-color: #04AA6D; }
The property that colours checkboxes/radios.
Discussion
Loading…