Disabling Text Selection with only CSS 1

[evilm]

Good Afternoon,
I attempted to search for help on this topic earlier and got nowhere, hence me starting this thread.

I have developed a simple ordered list navigation, and I wanted to build a class which would disable selection of the text in the menu options so they behave more like images than plain text.

I understand there is a javascript workaround, however, in the interest of keeping the site lean, I'd like to know if there is a way to do this only using CSS.

 

[Foamcow]

Can't be done with CSS unless you put an empty element over the top of the text. That may work, but seems a bit pointless.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BillyRayPreachersSon]

You can do it like this:

.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

That works in most major browsers except IE. For IE, you'd have to use either JS:

el.unselectable = "on";

or put it as an HTML attribute:

<el unselectable="on" ...>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Of course, with the CSS version, you'd then have to give your elements a class of "unselectable"...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Well I never knew that.

Hrmph!

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BillyRayPreachersSon]

There's a whole bunch of these enhancements proposed for CSS3:

http://www.w3.org/TR/2000/WD-css3-userint-20000216#dynamic

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Hmm, it's kind of starting to blur the line between style and behaviour. This seems to go against the idea of separating content, style and behaviour.

Interesting.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[feherke]

Hi

Then I think I will never upgrade to a CSS3 browser.

Feherke.

http://rootshell.be/~feherke/

 

[BillyRayPreachersSon]

Perhaps the DRM camp infiltrated the W3?



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[evilm]

Thank you very much for the help. The code worked beautifully—too bad IE doesn't support that CSS property.

 

[BillyRayPreachersSon]

Indeed - but at least you've the HTML attribyute to fall back on without needing JavaScript.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]