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: [stackoverflow.com/questions/826782/… [1]: stackoverflow.com/questions/826782/… — Chris Visser
– Chris Visser, Commented Jun 5, 2013 at 15:06
Possible duplicate of stackoverflow.com/questions/3779534/… and stackoverflow.com/questions/826782/… and stackoverflow.com/questions/2326004/prevent-selection-in-html — ignasi
– ignasi, Commented Jun 5, 2013 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
– cimmanon, Commented Jun 5, 2013 at 17:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2013 at 17:36

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fenderbridge Over a year ago

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

deceze · Accepted Answer · 2013-06-05 15:04:39Z

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 5, 2013 at 15:04

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Comments

johnkavanagh · Accepted Answer · 2013-06-05 15:17:05Z

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 5, 2013 at 15:17

answered Jun 5, 2013 at 15:05

johnkavanagh

4,6842 gold badges27 silver badges37 bronze badges

4 Comments

Fenderbridge Over a year ago

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

Fenderbridge Over a year ago

.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 Over a year ago

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.

George Stocker Over a year ago

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

Steffan · Accepted Answer · 2013-06-05 15:18:45Z

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 5, 2013 at 15:18

Steffan

5566 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

CSS

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

CSS

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related