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 :

Please note that the browser support is quite limited for user-select as of now. 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.

Related Posts

  • How to remove or Hide arrow / Spinners from input type number ? I am sure that by now you would have used various new input types available as a part of HTML5. Many of these input types have eliminated the requirement for JavaScript […]
  • How to detect support for a CSS feature using @supports ? With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are […]
  • Make CSS first-child work With the onset of CSS3 a lot of new selectors were introduced. Many of these new selectors have been of a lot of help to us. The first-child selector is one such […]
  • Conditional Comments in HTML Many of us would have come across scenarios where we wanted a different Stylesheet or CSS properties for IE (Internet Explorer). While many would have resorted to […]
  • How to center align a Div ? One of the most common queries all the new front End developers have is " How do we center align a DIV? ". Well, let me tell you that it is one of the easiest task. […]
  • What is the difference between Padding and Margin in CSS ? One of the most common confusions that developers starting off with CSS generally have is the difference between Padding and Margin. They are some of the most commonly […]