Anonymus Anonymus - 6 months ago 24
CSS Question

Unselectable text (link)

I have the following code: Fiddle



a {
color: #000;
text-decoration: none
}

<!- I want the link "JS Fiddle" to be not selectable. If I can't make it unselectable at least make it look like an image (select all the text at once)? -->

<a href="https://jsfiddle.net/">JS Fiddle</a>
<br>
<img draggable="false" src="http://i.imgur.com/qdYd7hK.png">





What I'm trying to achieve is make the link to look like an image in terms of selecting it.

"JS Fiddle" with the 1 blue selection like an image instead of for each character, like normal text.

The reason is because I wanna have a simple text (link) as it was the site's logo.

Answer

You can use user-select: none; so that the text of the element and sub-elements(on which CSS rule is applied) will not be able to be selected.

a {
  -webkit-touch-callout : none;     /* iOS Safari */
  -webkit-user-select   : none;     /* Chrome/Safari/Opera */
  -khtml-user-select    : none;     /* Konqueror */
  -moz-user-select      : none;     /* Firefox */
  -ms-user-select       : none;     /* Internet Explorer/Edge */
}

a {
  color: #000;
  text-decoration: none
}
a {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently not supported by any browser */
}
<!- I want the link text "JS Fiddle" to not be selectable. If I can't make it unselectable at least make it look like an image (select all the text at once)? -->
<a draggable="false" href="https://jsfiddle.net/">JS Fiddle</a>
<br>
<img draggable="false" src="http://i.imgur.com/qdYd7hK.png">

Comments