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!

Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020Written by Editorial Team
February 10, 2023

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.

9 Easy Ways to Deal With Difficult ClientsWritten by Editorial Team
February 10, 2023

This post may contain affiliate links. See our disclosure about affiliate links here.