🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS User Select

Control the user experience. Learn how to manage text selection with Auto, None, Text, and All.

style.css
.btn {
user-select: none;
cursor: pointer;
}
.code {
user-select: all;
}
Click me to select all
ui.css
1 / 7
🖱️

Tutor:The 'user-select' property controls how the text of an element can be selected. The default is 'auto'.


Selection Tree

Unlock nodes by mastering Auto, None, Text, and All selection modes.

Concept 1: Auto Selection

auto is the default value. The browser determines if the user can select text. Usually, text in paragraphs and headings is selectable, while text inside buttons or certain UI controls might not be.

System Check

What is the default behavior of user-select?

Community UX Patterns

Better Buttons

Most users apply user-select: none to buttons to prevent double-click highlighting.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS User Select

Author

Pascual Vila

Frontend Instructor.

The user-select property in CSS controls whether the user can select text. This does not affect content loaded as part of the user interface (like text in form fields), but it does control standard text content.

Why use it?

You typically disable selection on interactive UI elements (tabs, buttons, menus, icons) where double-clicking might trigger an action but accidentally highlighting the text looks broken. You enable specific selection types (like all) to make copying API keys or code snippets easier.

Key Values

  • auto: The default. The browser decides whether to allow selection.
  • none: Prevents selection entirely. Good for UI components.
  • text: The text can be selected by the user. Useful to override none from a parent.
  • all: The content is selected as a single unit. A single click selects the entire block.

Selection Glossary

Atomic Selection
A selection behavior where the content cannot be partially selected; it is either fully selected or not at all (seen with user-select: all).
Vendor Prefixes
Historically, this property required prefixes like -webkit-user-select or -moz-user-select. Modern browsers support the standard property well, though prefixes are still often used for maximum compatibility (Safari).
Inheritance
Since user-select is not an inherited property by default in all specifications, it is common to set it specifically on the elements that need it, though setting it on a container usually affects children effectively.