How to disable text selection with CSS

Published

12 Dec 2022

The CSS user-select property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4, controls how an element's text is allowed to be selected and can be used to make text unselectable.

Unselectable

css
.noselect {  -webkit-touch-callout: none; /* iOS Safari */    -webkit-user-select: none; /* Safari */     -khtml-user-select: none; /* Konqueror HTML */       -moz-user-select: none; /* Old versions of Firefox */        -ms-user-select: none; /* Internet Explorer/Edge */            user-select: none; /* Chrome, Edge, Opera and Firefox */}

This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

Select All

You can also use this to enforce that an entire element gets selection.

css
.selectAll {  -webkit-user-select: all;  /* Chrome 49+ */  -moz-user-select: all;     /* Firefox 43+ */  -ms-user-select: all;      /* No support yet */  user-select: all;          /* Likely future */   }
Share this article:
XXLinkedInFacebookFacebookWhatsAppWhatsAppBlueskyBlueskyRedditRedditEmail

Similar articles