For anchors that act like buttons (for example the Question, Tags, User, etc at the top of the SO page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?
I realize this could be done with javascript and a little googling yielded the mozilla-only "-moz-user-select" option.
My question is if there is a standard compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?
Thanks!
Until CSS 3's user-select property becomes available only Gecko based browsers will support the -moz-user-select property you already found.
This off course is not supported in browsers that do not use the Gecko rendering engine.
There is no "standards" compliant quick and easy way to do it, using JavaScript is an option.
The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users high-light a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the high-light feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.
The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.
Aside from the Mozilla-only property, no, there is no way to disable text selection with just standard CSS (as of now).
If you notice, Stack Overflow doesn't disable text selection for their navigation buttons, and I would recommend against doing so in most cases, since it modifies normal selection behavior and makes it conflict with a user's expectations.
You can do so in Firefox and Safari (Chrome also?)
::selection { background: transparent; }
::-moz-selection { background: transparent; }
This will disable user selection in Firefox and WebKit
-webkit-user-select:none;
-moz-user-select:none;