Blog
Select Page

Disable Text Selection Using CSS

Misc

Add this CSS style to elements you want to disable text selection and highlighting on selection. Mostly we need this on buttons and dropdown where users usually go for clicks and can accidentally select text. Check out this demo below and CSS code.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/css/disable-selection/index.html

CSS

.disableselection {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Related queries:

  • How to disable text selection using CSS
  • CSS User Select: How to disable text selection
  • How to disable text selection highlighting using CSS?