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/

Dogooder

Try this link it requires multiple lines: [#827282 [1]: #827282 – Hectocotylus

Don't make your header using tables, make it using DIVs. – Alis

Possible duplicate of #3780034 and #827282 and https://mcmap.net/q/195888/-prevent-selection-in-html – Hideandseek

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. – Aime

Answer 1

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/

Chaqueta

This one did it for me! Thank you so much! – Dogooder

Answer 2

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

Bellay

Answer 3

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;
}

Natch

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

.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; } – Dogooder

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. – Dogooder

@JaredTillford You should edit that into your question, not into the comments. It's hard to follow in the comments. – Dogleg

Answer 4

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);

Ducal