How do I make it impossible to highlight text using CSS?

Question

I am trying to make a website. I made a header using tables, and when you highlight it it looks tacky.

.topmenu::selection 
    {
    background: rgba(255,79,79,0); /* Change highlight color */
    }

I call it by using <div class="topmenu::selection"> in the PHP. Am I calling this code incorrectly?

Thanks!

EDIT: This didn't quite seem to work. I am working with expression engine if that makes any changes. here is my work so far:

<meta http-equiv="Content-Type" content="text/html; charset={charset}" /> <link rel="shortcut icon" href="/Flame.ico" />
 <title>New Hope Christian College</title>
 <link rel="stylesheet" type="text/css" href="/nhcc-css/text.css" /> 
<center> 
<table width="960" border="0" div class="topmenu">

.topmenu {
    FONT-SIZE: 12px; COLOR: #000000;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
}

.topmenu::selection {
    background: transparent;
}
.topmenu::-moz-selection {
    background: transparent;
}
.topmenu a {
    color: #A71137; text-decoration: none;
}
a:hover {
    COLOR: #000000;
    text-decoration: none;
}

Essentially, I have a table, I want the header (which is a table) to be "unselectable" and the rest of the body to be selectable.

This one did it for me!

It's possible in CSS3 user-select property:

CSS

.element{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

You can also add cursor:default; on the :hover peuso-element.

Example with a table and a thead

http://jsfiddle.net/swAmt/2/

Try this link it requires multiple lines: [http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting][1] [1]: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting — Chris Visser, Jun 05 '13 at 15:06
Possible duplicate of http://stackoverflow.com/questions/3779534/how-to-disable-text-selection-with-css-or-js and http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting and http://stackoverflow.com/questions/2326004/prevent-selection-in-html — ignasi, Jun 05 '13 at 15:07
Is that your unedited markup? Because it looks like you either have a table in your head element (which isn't allowed) or head elements (title, etc.) in your body element (which also isn't allowed). Also, deprecated center tag, deprecated table attributes, etc. — cimmanon, Jun 05 '13 at 17:30

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

7

It's possible in CSS3 user-select property:

CSS

.element{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

You can also add cursor:default; on the :hover peuso-element.

Example with a table and a thead

http://jsfiddle.net/swAmt/2/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 05 '13 at 17:36

Jeff Noel

7,500
4
40
66

This one did it for me! Thank you so much! – Fenderbridge Jun 05 '13 at 18:28

score 0 · Answer 2 · answered Jun 05 '13 at 15:04

0

Change it to:

<div class="topmenu">

::selection is a pseudo class. It's not something you actually assign to something. .topmenu::selection means "whenever the .topmenu element is being selected".

answered Jun 05 '13 at 15:04

deceze

510,633
85
743
889

johnkavanagh · Answer 3 · 2013-06-05T15:17:05.063

0

There really isn't any way of achieving this. What you can do, however, is make it appear as if highlighting is disabled with CSS by removing the background-colour that would otherwise be applied.

It's not yet fully-supported so you have ot use differing vendor prefixes, but essentially this will do (at least part of) what you're after:

::selection {
    background: transparent;
}
::-moz-selection {
    background: transparent;
}

Do bear in mind that these are pseudo-class selectors, and don't make up part of the class itself in your markup.

If it was just .topmenu that you wanted to apply this to, your markup would look like this:

HTML: <div class="topmenu">

CSS:

.topmenu::selection {
    background: transparent;
}
.topmenu::-moz-selection {
    background: transparent;
}

edited Jun 05 '13 at 15:17

answered Jun 05 '13 at 15:05

johnkavanagh

4,614
2
25
37

This didn't quite seem to work. I am working with expression engine if that makes any changes. here is my work so far: ` New Hope Christian College `
– Fenderbridge Jun 05 '13 at 15:35
`.topmenu { FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; } .topmenu::selection { background: transparent; } .topmenu::-moz-selection { background: transparent; } .topmenu a { color: #A71137; text-decoration: none; } a:hover { COLOR: #000000; text-decoration: none; }` – Fenderbridge Jun 05 '13 at 15:36
Essentially, I have a table, I want the header (which is a table) to be "unselectable" and the rest of the body to be selectable. – Fenderbridge Jun 05 '13 at 15:37
1

@JaredTillford You should edit that into your question, not into the comments. It's hard to follow in the comments. – George Stocker Jun 05 '13 at 15:58

score 0 · Answer 4 · answered Jun 05 '13 at 15:18

0

In the html, change the DIV class to:

<div class="topmenu">

I also seem to have a problem highlighting the text with

background: rgba(255,79,79,0);

Try using another value other than 0, such as

background: rgba(255,79,79,0.5);

answered Jun 05 '13 at 15:18

Steffan

536
5
15

How do I make it impossible to highlight text using CSS?

4 Answers4

CSS