CSS to only allow selection of text on a webpage?

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/

score 19 · Accepted Answer · answered Jun 22 '11 at 01:16

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}

score 6 · Answer 2 · edited Jun 22 '11 at 00:53

6

this might work:

img, div { 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}

edited Jun 22 '11 at 00:53

Nick Radford

1,038
6
13

answered Jun 22 '11 at 00:48

Joe

80,724
18
127
145

Any idea what kind of browser support exists for this? – kinakuta Jun 22 '11 at 00:50
It does, for images and divs. But what about just general empty space. If you hit control+a and select the entire page, you just don't get the text, you get it all. I'l post a link shortly – alt Jun 22 '11 at 00:51
@kinakuta: Recent Gecko, Presto and WebKit builds support the vendor-extension versions (`-moz-user-select`, `-o-user-select` and `-webkit-user-select`). – BoltClock Jun 22 '11 at 00:51
Looks like it's CSS3 so limited. There are variations you can try: -o-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -ms-user-select: none; user-select: none; – citizen conn Jun 22 '11 at 00:52
ALMOST! That edit did quite a bit. You really only need webkit, moz and o then the default, no browsers that anyone uses use the others. :/ – alt Jun 22 '11 at 00:54
It doesn't work in Opera 11.10 or IE 6, probablly later versions too. – RobG Jun 22 '11 at 02:08
IE certainly doesn't support this up to and including IE 8, not sure about IE 9. You can use the proprietary `unselectable` attribute/expando instead. See http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4358620#4358620 – Tim Down Jun 22 '11 at 22:40

CSS to only allow selection of text on a webpage?

2 Answers2