To prevent text from being selected on a web page using CSS, you can use the user-select property. This property allows you to control whether the user can select text on the page.

Here’s how to do it:

element {
user-select: none;
}

Details:

  • user-select: none; – disables text selection for the selected element. This means that the user will not be able to select or copy text within this element.
  • user-select: text; – allows the selection of text (this value is the default value for most elements).
  • user-select: auto; – allows the browser to automatically decide whether text can be selected.
  • user-select: contain; – allows selection only for some elements, for example, if the text is inside an element with certain properties.

Example:

/* Disables text selection on the entire page */
body {
user-select: none;
}

This code will disable text selection on the entire page. If you want to disable selection for specific elements only, such as paragraphs or buttons, simply apply the property to the corresponding elements:

p {
user-select: none;
}

Support by browsers:

user-select is supported in most modern browsers, such as Chrome, Firefox, Safari, and Edge, but it’s worth checking its compatibility for older versions of browsers as support may change.

By Blog