← coderrocketfuel.com

Stop a User From Selecting the Text of an HTML Element

How can you stop users from selecting an HTML element's text content?

You can do this with some basic CSS code:

button {
  user-select: none;
}

This would stop the user from selecting the text of the <button> element this CSS is applied to.

To support all browsers, you'll need to add vendor prefixes like below:

button {
  -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; /* IE/Edge */
  user-select: none; /* Non-prefixed version, supported by Chrome, Edge, Opera and Firefox */
}

You can read more about the user-select CSS property here.

Thanks for reading and happy coding!