Question

Is there a lightweight CSS or Javascript snippet that will allow me only make the selection/highlighting of things on a page only available to text? It’s always annoyed me when you’re trying to highlight text and you end up highlighting divs and images and things.

Is there a way ONLY to highlight text? That would include paragraph, anchors, text inside divs & images, and all header tags.

Thanks!
~ Jackson

I’m uploading the results anyone who who answers this, I’m currently running @Nick Radford ‘s code he ETA’d.

Here it is, and it’s closer, still a lot of selection besides text going on with ctrl+a:
http://designsweeter.com/

Answer 1

html{ 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}
p,a,h1,h2,h3,h4,h5,h6,div,br,li,td,article{
    -o-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

The first block disables selection in html, the second re-enables it to any item that can contain text as of HTML5. It’s pretty big, but minified, it’s smaller:

html{-moz-user-select:none;-o-user-select:none;-webkit-user-select:none;user-select:none}p,a,h1,h2,h3,h4,h5,h6,div,br,li,td,article{-moz-user-select:text;-o-user-select:text;-webkit-user-select:text;user-select:text}