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.
When to use it
- Highlight selected text
- Choose rows for a bulk action
- Select files or canvas objects
- Keep a current item visibly chosen
When NOT to use it
- Use the same style for hover, focus, and selection
- Clear a multi-selection without warning
- Show a selected appearance before the data is selected
- Rely on color alone for important item selection
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
A low-cost, polished nod to your brand color
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
Further reading