Quick Tip: How to Disable Text Selection Highlighting in CSS

There are two main CSS properties that control text selection highlighting: user-select and -webkit-user-select. These properties are used to specify whether or not users are able to select text on the web page.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!


DOWNLOAD NOW

To disable text selection highlighting in CSS, you can set the value of the user-select property to none:

body {
-webkit-user-select: none; /* for Safari */
-moz-user-select: none; /* for Firefox */
-ms-user-select: none; /* for Internet Explorer */
user-select: none; /* for modern browsers */>

In this example, the user-select property is applied to the body element, which means that text selection highlighting will be disabled for the entire page. If you want to disable text selection highlighting for a specific element, simply apply the property to that element instead of the body element.

It’s important to note that the -webkit-user-select and -moz-user-select properties are vendor-specific extensions, and are used to ensure compatibility with Safari and Firefox, respectively. The -ms-user-select property is used for compatibility with Internet Explorer. The standard user-select property should work in all modern browsers.

By: Editorial Team
Title: Quick Tip: How to Disable Text Selection Highlighting in CSS
Sourced From: 1stwebdesigner.com/quick-tip-how-to-disable-text-selection-highlighting-in-css/
Published Date: Mon, 06 Feb 2023 09:22:45 +0000

Did you miss our previous article…
https://www.webdesignhawks.com/?p=21570