How to disable selection of text in html using CSS ?

MoreOnFew
Posted underCSS

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 user-select. 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.

TaggedCSS


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew