CSS3 Cross Browser User-Select Reset
|
1 2 3 4 5 |
/** The example below relies on <a href="http://the-echoplex.net/csscrush/" target="_blank">CssCrush</a> to get all the cross-browser extensions. If you don’t use it then just add lines for the browser prefixes `-moz-`, `-khtml-`, `-webkit-`, `-o-` **/
* { user-select: none; -moz-user-select: text !important; }
NAV, NAV * { -moz-user-select: none !important;}
ARTICLE H1, ARTICLE H2, ARTICLE H3, ARTICLE H4, ARTICLE H5, ARTICLE H6, ASIDE H1, ASIDE H2, ARTICLE H3, ASIDE H4, ASIDE H5, ASIDE H6, ARTICLE H1 A, ARTICLE H2 A, ARTICLE H3 A, ARTICLE H4 A, ARTICLE H5 A, ARTICLE H6 A, ASIDE H1 A, ASIDE H2 A, ASIDE H3 A, ASIDE H4 A, ASIDE H5 A, ASIDE H6 A, ARTICLE P, ARTICLE P A, ARTICLE SPAN, ARTICLE STRONG, ARTICLE EM, ASIDE P, ASIDE P A, ASIDE SPAN, ASIDE STRONG, ASIDE EM, ARTICLE PRE, ARTICLE CODE, ASIDE PRE, ASIDE CODE, ARTICLE P + LI, ARTICLE P + LI A, ASIDE P + LI, ASIDE P + LI A, ARTICLE BLOCKQUOTE, ARTICLE BLOCKQUOTE A, ASIDE BLOCKQUOTE, ASIDE BLOCKQUOTE A, FIGCAPTION, FIGCAPTION A, TIME, TIME SPAN, TIME A, INPUT[type="text"], TEXTAREA { user-select: text; } |
Notes:
This snippet disables content selection on all elements and then re-enables it for common text elements in ASIDE or ARTICLE (and a few other) contexts. If you want images to be selected, change `: text;` to `: all;`
[EDIT] Mozilla blocks all children from overriding unless you use `-moz-none` for the value. Even so I found it to muck up the user experience so I’ve tweaked the code below to allow selection for Mozilla on everything by default except elements inside NAV tags.