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.
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
Further reading