How to disable selection of text in html using CSS ?

Depending on your requirement you might have to disable text selection or text highlighting in HTML using CSS or JavaScript. While there are different ways to do this, you can easily disable text highlighting using CSS. Consider a situation where you have a copy paste functionality like a coupon code etc that you want the user to select and paste somewhere but at the same time you don’t want the user to select some other text around it like the label text etc. In such cases you would have to disable the selection of texts other that the specific text you want the user to select like the coupon code etc. You can easily make the text unselectable using CSS property user-select.

Disable selection is CSS using user-select property

You can disable the selection using the following CSS Code :

.no-select {
-webkit-user-select: none; /* Chrome all / Safari all */
-webkit-touch-callout: none; /* iOS Safari */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Common (limited support) */
}

Please note that the browser support is quite limited for user-select as of when I wrote this article. However, you can check for the latest support list at caniuse. To summarise I would say that you can use user-select css property to disable selection is css however, please check for the browser support before you go ahead and use it on any production site.

The post How to disable selection of text in html using CSS ? first appeared on MoreOnFew.