Selection

You might say

Change the text highlight color to our brand color when people select text.

Show which text or items the user has selectedSelection highlights the text, rows, files, or objects included in the next action. Keep it distinct from hover and focus, and make the selected set remain clear while menus or toolbars open. The visual state should match the actual data selection.

Default

Drag to select some text, the part in the middle is the highlight, with colors picked by the browser.

Brand

Drag to select some text, the part in the middle is the highlight, echoing the brand color.

You can say this to an AI Agent

Use brand-aligned ::selection colors that remain readable in light and dark themes, and keep body text selectable and copyable. Restrict user-select: none to explicit drag handles, then verify keyboard copy and selection scope.

When to use it

Highlight selected text
Drag to select some text, this part is selected, and the colors are determined by the browser and operating system.
Choose rows for a bulk action
In the same sentence, Use the brand color for selection, first confirm its contrast and scope.
Select files or canvas objects
Dark background, white text ✓Light background, dark text ✓
Keep a current item visibly chosen
Saveuser-select: none

When NOT to use it

Use the same style for hover, focus, and selection
In this sentencepart of it is selected, but the state is not clear.
Clear a multi-selection without warning
Button label selectedDragging over the click target accidentally selected the button label.
Show a selected appearance before the data is selected
SelectionSelectionSelection
Rely on color alone for important item selection
The body copy uses user-select: none, so people cannot select and copy what they need.

Anatomy

The previous paragraph is not selected, This paragraph was dragged and selected, and the rest was not selected

The unselected part stays exactly as it was

The span of text covered by the mouse drag

The background of ::selection

The color of ::selection; must contrast enough with the background

Variants

Default

Selection

When the browser default already meets the product's needs

Brand

Selection

Echoes your brand color without new components

NoSelect

Drag handle · user-select: none

Drag handles or interaction-only decoration that should not be selected

Typical use cases

Text selection

Three Habits for Better Prompts

When writing a prompt, state your goal first, then give context. The model can't read your mind, so list every key constraint clearly instead of expecting it to guess.

📋 Copy

Table rows

1.card {
2  border-radius: 12px;
3  padding: 16px;
4}

File browser

✕ Meant to click, dragged a blue streak

✓ user-select: none prevents mis-selection

Design canvas

MUSEON STUDIO

Let good ideas be seen by the world

Selection color = brand color, one line of ::selection

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Selected article text uses brand blue behind gray copy and is barely readable, and the team wants to block copying. What should change?

A. Keep the brand blue and gray text because brand compliance is more importantB. Apply user-select: none to the entire article so accidental selection cannot happenC. Use a high-contrast selection for body text, allow copying, and disable selection only on drag handles