This content originally appeared on 1stWebDesigner and was authored by Editorial Team
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!
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.
This content originally appeared on 1stWebDesigner and was authored by Editorial Team

Editorial Team | Sciencx (2023-02-06T09:22:45+00:00) Quick Tip: How to Disable Text Selection Highlighting in CSS. Retrieved from https://www.scien.cx/2023/02/06/quick-tip-how-to-disable-text-selection-highlighting-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.