Search code examples
csstexthighlighting

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


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/


Solution

  • 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/