Unselectable text (link)

Question

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.

@Rayon I think I can't accept a comment so I will accept Munawir's, unless you want, then just make it an answer. — Anonymus, Jun 01 '16 at 09:57
Yes...Accept the best solution which has solved the purpose. — Rayon, Jun 01 '16 at 09:59
@Rayon why `-webkit`? There are no more browsers than Chrome / Safari? OMG — Marcos Pérez Gude, Jun 01 '16 at 10:05
@MarcosPérezGude, Yes there are.. I have been using this for mobile browsers a lot and that could be reason this came in my mind.I have edited accepted answer with more accurate source as a reference.. — Rayon, Jun 01 '16 at 10:07
I am not understanding your requirement clearly but some solution like $(document).ready(function(){ $("a").removeAttr("href"); }); — Akram Khan, Jun 01 '16 at 10:08
@MarcosPérezGude I'm actually using Chrome and I know the best is to make it possible to all browsers and all, but for now I will use that. Also, Munawir answered to the others. Chrome's Master Race! :D — Anonymus, Jun 01 '16 at 10:11
The best layouts usually are made in Firefox to avoid relayout in other browsers. For example, [David Walsh](https://davidwalsh.name) said that he browse with Chrome, but develop with Firefox, by this way he write standards and then only fix few specific errors in other browsers. When you develop in Chrome, the most probably thing that you will obtain is that you need to relayout to other browsers. I'm test this behaviour and since I'm developing with Firefox my webpages are almost exactly in all browsers. Believe me ;) — Marcos Pérez Gude, Jun 01 '16 at 10:17
@Everyone How hard is to make a universal browser that everybody likes!? I never got that... It may be hard but there's people for everything. — Anonymus, Jun 01 '16 at 10:24
It's not hard, firefox is in the correct way. But enterprises like Micro$oft or Google are not interested in an "universal browser", are interested in his market quota, and if they can make a monopoly they will do it. — Marcos Pérez Gude, Jun 01 '16 at 10:36

score 3 · Accepted Answer · edited Jun 01 '16 at 10:12

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">

score -2 · Answer 2 · edited Jun 01 '16 at 10:06

-2

Well you can use

a{
   pointer-events: none;
   cursor: default;
}

a{
   color: #000;
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

<!- 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">

edited Jun 01 '16 at 10:06

Quentin Roy

7,677
2
32
50

answered Jun 01 '16 at 09:57

Nick

102
9

This code will make your link as image. – Nick Jun 01 '16 at 09:57
It makes the link un-clickable, and does not avoid text selection. – Quentin Roy Jun 01 '16 at 10:07
@Nick That's pretty cool also, and I didn't knowed about, but at the moment I want the link (that's why it's a link and not text) to work, I just didn't wanted the selection. I still like your answer as it will sure help for other projects I make. – Anonymus Jun 01 '16 at 10:08
Yea, sorry I didn't see you want link to work. – Nick Jun 01 '16 at 17:17

Unselectable text (link)

2 Answers2