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


Tags: css,text,highlighting

Problem :

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/


    CSS Howto..

    How can align these elements?CSS

    CSS Selectors - How to apply a defined class on the selector's event

    How to set color of the Button with jQuery UI?

    How to centre my CSS menu?

    How to work with CSS efficiently?

    How to conditionally render CSS and JavaScript inside head element of an HTML

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to bound CSS3 animation to class

    How to match baseline in two floating divs

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to Customise the angular material date-picker?

    How do I make my images in my div change opacity on hover?

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • CSS - How to avoid element content to be displayed on 2 lines

    How to make custom css fonts render exactly like designs

    How to protect my injected elements CSS?

    How to remove default document style from an element using Javascript

    How can i select the div from CSS?

    How to align more than one DIVs which list of letters to the center

    How to have different table styles in CSS

    How to set table cell padding from CSS?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to animate all except one feature with CSS

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How to show the width of an element in the content of an ':after' pseudo-element?

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    How do you structure css files for a web project?

    How to bottom align a title of variable length

    How to read this LESS css?