![Raylo Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384961d4f194295c8d8797_02d03e31-2b08-4ca5-a29e-addc73813995-1620853142674.webp)
![Guitar Tricks Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384a95e03b9dafbf4939ed_GuitarTricksLogo.webp)
![Raylo Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384961d4f194295c8d8797_02d03e31-2b08-4ca5-a29e-addc73813995-1620853142674.webp)
![Guitar Tricks Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384a95e03b9dafbf4939ed_GuitarTricksLogo.webp)
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/65e1dc870c6d9eba3f872814_65e1dc3bc2cc0d921a4be442_Select%20None%20CSS.webp)
![Mozilla Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/664b66d96a4be9ef3e6512a2_Mozilla_logo.svg.png)
Non-selectable Text
Mastering Text Selection Control with CSS user-select: none
Have you ever encountered elements on a website that you simply couldn't select or highlight? Perhaps you tried to copy a snippet of text or drag your mouse over a paragraph, only to find that the selection was stubbornly disabled. This behaviour is often achieved using the CSS property user-select: none.
In this post, we'll delve into the world of user-select: none, explore its use cases, and discuss the potential impact on user experience (UX).
What is user-select: none?
user-select: none is a CSS property that controls whether users can select text within an element. When applied, it prevents text from being highlighted, dragged, or copied. This can be applied to specific elements or entire sections of a webpage.
Why Use user-select: none?
There are a few legitimate reasons to use this property:
- Preventing Accidental Selection: In certain scenarios, you might want to avoid users accidentally selecting text while interacting with elements, such as buttons or interactive components.
- Protecting Content: In some cases, you might want to discourage users from copying or reusing content, although this should be used with caution (we'll discuss this later).
- Custom Cursors: When designing custom cursors, user-select: none can help prevent the default text selection behavior from interfering with your custom cursor's appearance.
How to Use user-select: none
Step.1
Select the text element you will apply this rule to.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/664b6c0ad751e690c9157ac6_S-6OPUl09nyUGFyrXBsPQjPB3u-2_7U0yvEwGKB3I51Hgh651xxem7F7Bw3SUIqqAIE1eDM6UoJkC6lWr3rg6kUY24y8CnXd9pXjWKiiqpL_SF3s1a1Z5GVg2Ru1XdsSHWwXQS122Bt28o_trLge3Cs.webp)
Step.2
Navigate to the Styles panel on the right hand side. Scroll all the way down to the bottom and you’ll see Custom properties.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/664b6c0a347a185ca2438619_Z86oAMh-vSJatofTACkPMzajKXP5lewBsbUe0hyt1hOVDsvQYwEdpM6_maAUMnY52jZUWE8FbFU4Dss_Rb6U4s2OTkEEUFFtz66OCE3EKB9KT9Llk2YQsrawq1dTafv_f823oZCFn1LzflYlYXosByg.webp)
Step. 3
Click on the “+Add” button and type in to the properties field “user-select”, hit return/enter to select this property.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/664b6c0a8399878a5cb7cc3b_p4wseUsmr6V_Hv_rlgEbPFVt3pCRo0POOLaKZbAp947LLlRCkFHQS0OsF0q6LtdIodcrnpdqlRcI1_785Nq-6ccSInNL4X5nwbz5e7N_msQ-Ym6RJIUUSf47K5-VP3saJX3EcAO-gGBxZK5-2m13G-Y.webp)
Step.4
With the property set, you can now add a value.
So for this tutorial I’m using the value “none”, which as it sounds, the user can not select the text. But below are a few more options and some use cases.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/664b6c0abda9d5a99c3f5436__D813hRyemKmY551kS80dN-v95ZD4Hj1TtCD9B1Mk7wyxR3vSN90cSNtt2dLgpwKpFDXZBQ3wW_EoMVyVc82iIGoOrKjJ1etycBf0Gpwdf6Q9X-MMradTiTsnH0wY90z50kAtYes6diE9d7rzMs0iuM.webp)
Other Options
user-select: contain;
Behavior:
- Enables text selection to start within the element, but the selection is constrained to the bounds of that element and its descendants. Even if you double-click or context-click within sub-elements, the selection will be limited to the highest ancestor with this value.
Use Cases:
- Useful when you want to allow selection within a specific container but prevent it from extending beyond that container.
user-select: all;
Behavior:
- Allows the entire element's content (including all its descendants) to be selected with a single click instead of requiring a double-click.
Use Cases:
- Simplifying text selection for users, especially on touch devices where double-clicking might be less intuitive.
- Creating a custom selection behavior for specific elements.
Considerations and UX Impact
While user-select: none can be useful, it's crucial to consider its impact on user experience:
Frustration:
- Preventing users from selecting text can be frustrating if they want to copy or highlight content for their own purposes.
Accessibility:
- Disabling text selection can negatively impact users who rely on screen readers or other assistive technologies.
Conclusion
The user-select: none property can be a powerful tool in your CSS arsenal. However, use it judiciously and prioritize the needs and expectations of your users. By balancing functionality with usability, you can create a positive and accessible experience for everyone.
Let me know if you'd like more tips or examples on using CSS to control text selection!
Up your Webflow game by adding custom CSS properties.