You want to prevent text from being selected/highlighted; whether to prevent copying and pasting or accidental text selection.
To solve this problem you will want to set the user-select CSS property to none.
Disable text selection with user-select
Because each browser is slightly different, the CSS is slightly convoluted because each browser has a slightly different prefixed version of the user-select. Let’s take a look at the example:
In the above example, try selecting the header Title. It is unselectable; however, you can click the button. The user-selectproperty prevents (in this example) all text button being selectable.
If you only wish to apply it to specific elements, you could update the example replacing * with a class name.
Other useful articles
June 4, 2023 Creating a Typing Animation with CSS: Display Text as if It’s Being Typed Out in Real-Time (0)
February 22, 2019 Apply two different colors to a single character with CSS (0)
June 25, 2019 CSS3’s border-radius property and border-collapse:collapse don’t mix (0)
July 5, 2022 Transparent Background CSS (0)
October 23, 2012 CSS: Start Generic before going Specific (0)
