We disable text selection on a webpage to prevent users from selecting important texts. Normally, we do not want to take away a user’s ability to select text, as that will lead to a bad user experience.
There was a time when a small number of websites would prohibit users from copying article text as a means of preventing plagiarism, but that is thankfully becoming less common.
Every thing has advantages and disadvantages; we discussed the disadvantages above; now, let’s discuss some of the advantages and disadvantages of disabling text selection:
- During drag and drop scenarios, we don’t want the user to select the text instead of the container when dragging the container.
- On document and image editing websites we don’t want formatting buttons like underline button to be selected while clicking the button.
- When reading a text-heavy website on a mobile device, we don’t want the text to be selected when the user zooms in with a double tap.
Table of content
- Disable text selection in CSS
- Disable text selection in Safari
- Disable text selection in Internet Explorer
- Disable text selection in Tailwind CSS
How to disable text selection in CSS
All modern web browsers (except Safari) now support text selection disablement via the
How to disable text selection in Safari
To disable text in Safari, we have to use
-webkit-user-select CSS property:
How to disable text selection in Internet Explorer
To disable text in Internet Explorer, we have to use
-ms-user-select CSS property:
How to disable text selection in Tailwind CSS
To disable text in Tailwind CSS, we need to add
select-none class to the element:
<div class="select-none">quick brown fox jumps over the lazy dog</div>
List of properties of
user-select: none- no user select on the element.
user-select: text- you can only select the text within the element
user-select: all- tapping once will select the entire elements content.
user-select: auto- the default, lets you select everything like normal.
In this article, you have learned how to disable text using CSS in different browsers and using Tailwind CSS. Further you have got a brief idea about the list of the properties of
I hope you have learned something useful and beneficial.
Thanks for reading
Follow me on Twitter
Thanks for reading!