CSS - User Select

Ethan D. - May 31, 2024

The user-select Property

The user-select property in CSS controls how users can select and highlight text within an element. It lets you change the text selection behavior on a web page. The syntax for the user-select property is:

Example: CSS Syntax

user-select: value;

The value can be one of the following:

Value	Description
`none`	Prevents text selection within the element.
`auto`	Allows the default text selection behavior. This is the default.
`text`	Allows text selection within the element.
`all`	Allows the selection of all elements within the container.

Most elements have the user-select value set to auto by default, which means that users can select and highlight text normally. You can change this behavior by setting the user-select property to one of the other values.

Most modern browsers, including Chrome, Firefox, Safari, and Edge, support the user-select property. But the property is not part of the official CSS specification, so its behavior may vary slightly across different browsers. Some older browsers may need vendor prefixes, such as -webkit-user-select or -moz-user-select, to work.

Values of user-select

none

The user-select: none value stops users from selecting text within the element. When this value is set, users cannot highlight or copy the text using the mouse or keyboard. This can be useful in cases where you want to protect content from being copied or when you want to create custom UI elements that shouldn't have selectable text.

Common uses for user-select: none include:

Making custom buttons or navigation menus where text selection is not wanted.
Stopping users from selecting text by mistake while using interactive elements like sliders or drag-and-drop interfaces.
Protecting sensitive or copyrighted content from being copied easily.

Example of user-select: none

.no-select {
  user-select: none;
}

auto

The user-select: auto value is the default setting for most elements. It lets the browser choose the right text selection behavior based on the element type and user interaction. Users can select and highlight text normally when auto is set.

Uses for user-select: auto include:

Allowing normal text selection behavior for paragraphs, headings, and other text elements.
Setting the text selection behavior back to the default value after using other user-select values on an element or its parent.

text

The user-select: text value allows users to select and highlight text within the element. This value is useful when you want to make sure text stays selectable, even if a parent element has user-select: none set.

Some uses for user-select: text include:

Making sure that text within an element stays selectable, even if the parent element's user-select value is different.
Overriding the user-select: none value from a parent element for a specific child element.

Example of user-select: text

.selectable-text {
  user-select: text;
}

all

The user-select: all value lets users select all elements within the container when any part of the text is selected. This means that clicking and dragging the mouse to select text will highlight everything inside the element, including nested elements.

Uses for user-select: all include:

Making a "Select All" feature for a container with multiple elements, such as a list of checkboxes or a group of text elements.
Letting users select and copy whole sections of content easily, including nested elements like links or emphasis tags.

Example of user-select: all

.select-all-container {
  user-select: all;
}

Applying user-select

You can apply the user-select property to elements or globally to control text selection on your web page. Here's how you can use user-select:

Applying user-select to elements

To apply user-select to an element, target the element using a CSS selector and set the user-select property with the value you want. This lets you control text selection for elements on your page.

Example: Applying user-select to an element

.custom-button {
  user-select: none;
}

Applying user-select globally

You can also apply user-select globally to affect all elements on your page. To do this, set the user-select property on the <body> element or use the universal selector (*).

Example: Applying user-select globally

body {
  user-select: none;
}

Combining user-select with other CSS properties

You can combine the user-select property with other CSS properties to create custom text selection styles and behaviors. For example, you can use the ::selection pseudo-element to style the look of selected text.

Example: Combining user-select with other CSS properties

.custom-text::selection {
  background-color: #ff0000;
  color: #ffffff;
}

.custom-text {
  user-select: text;
}

By combining user-select with other CSS properties, you can create text selection experiences that fit your website's design and functionality.

Accessibility Considerations

When using the user-select property in CSS, it's important to think about how it may impact accessibility on your website. Changing the default text selection behavior can affect how users interact with your content, especially those who rely on assistive technologies like screen readers.

Impact of user-select on accessibility

Setting user-select: none on elements can make it harder for some users to interact with your content. Users who navigate websites using a keyboard may find it difficult to select and copy text if the user-select property is set to none. Similarly, screen reader users may not be able to use their assistive technology's text selection features when user-select: none is applied.

Use the user-select property carefully and only when it's needed for your website's design or functionality. Avoid applying user-select: none to large sections of text or important content that users may need to select, copy, or interact with.

Best practices for using user-select

When using the user-select property, follow these best practices to keep your website accessible:

Apply user-select: none selectively: Only apply user-select: none to specific elements that don't need to be selectable, such as custom buttons or interactive widgets.

Avoid using user-select: none on large blocks of text: Avoid using user-select: none on large blocks of text or content that users may need to select or copy.

Set user-select: text on child elements:
If you need to use user-select: none on a parent element, consider setting user-select: text on child elements that contain text users should be able to select.

Test with keyboard navigation and screen readers: Test your website with keyboard navigation and screen readers to make sure the user-select property doesn't interfere with accessibility.

Alternatives to user-select for accessibility

If you need to prevent users from selecting or copying content for design or legal reasons, consider using alternative methods that don't rely on the user-select property:

Use JavaScript to dynamically disable text selection on specific elements when needed, rather than applying user-select: none in your CSS.

Example: JavaScript to Disable Text Selection

element.addEventListener('selectstart', (event) => {
    event.preventDefault();
});

For content that shouldn't be copied, consider using watermarks, overlay images, or other visual deterrents rather than disabling text selection entirely.

If you need to protect sensitive or copyrighted content, use server-side techniques like disabling right-clicking or implementing content protection measures.

Examples and Demos

To understand how the user-select property works, let's look at some simple examples and more complex demos that show its usage in real scenarios.

Simple Examples Showing user-select Values

Here are some simple examples that show the different values of the user-select property:

Example: user-select: none

<p class="no-select">This text cannot be selected.</p>

.no-select {
  user-select: none;
}

In this example, the text inside the <p> element cannot be selected by the user because the user-select property is set to none.

Example: user-select: text

<div class="parent-element">
  <p class="selectable-text">This text can be selected.</p>
</div>

.parent-element {
  user-select: none;
}

.selectable-text {
  user-select: text;
}

Here, the user-select: none is used on the parent element, but the child element with the class .selectable-text has user-select: text, which lets the text inside it be selected even with the parent's setting.

Example: user-select: all

<div class="select-all-container">
  <p>This text can be selected.</p>
  <p>This text can also be selected.</p>
  <a href="#">This link can be selected too.</a>
</div>

.select-all-container {
  user-select: all;
}

In this example, when the user selects any part of the text inside the .select-all-container, all the elements within the container will be selected, including the paragraphs and the link.

Complex Demos Showing user-select in Real Scenarios

Now, let's look at some more complex demos that show how the user-select property can be used in real scenarios:

Example: Custom Button with user-select: none

<button class="custom-button">Click me!</button>

.custom-button {
  user-select: none;
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #0056b3;
}

In this demo, we make a custom button with user-select: none to stop the text inside the button from being selected when the user clicks on it. This makes a cleaner user experience for interactive elements like buttons.

Example: Selectable Code Block

<pre class="code-block"><code>function greet(name) {
  console.log(`Hello, ${name}!`);
}
</code></pre>

.code-block {
  user-select: text;
  background-color: #f4f4f4;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
}

This demo shows a code block that lets users select and copy the code easily. By setting user-select: text on the <pre> element, we make sure that the code stays selectable even if the parent element has a different user-select value.

These examples and demos should help you understand better how to use the user-select property in your projects and make custom text selection behaviors that improve the user experience on your website.