How to disable text selection in CSS

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 user-select property:

.text-container {
    -webkit-user-select: none;
    user-select: none;
}

How to disable text selection in Safari

To disable text in Safari, we have to use -webkit-user-select CSS property:

.text-container {
    -webkit-user-select: none;
    user-select: none;
}

How to disable text selection in Internet Explorer

To disable text in Internet Explorer, we have to use -ms-user-select CSS property:

.text-container {
    -ms-user-select: none;
    user-select: none;
} 

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

• 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.

Conclusion

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

I hope you have learned something useful and beneficial.

Thanks for reading

Follow me on Twitter

Thanks for reading!