Change Text Selection Color on Webpage

Votes : 3.4
534
In CSS 3 used ::selection to overrides your browser-level or system-level text highlighting styles compatible with many browsers. But only a few CSS properties can be applied.
eq: color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow.

Browser Support

Chrome 4.0+, IE 9.0+, Firefox 2.0+,Safari 3.1+,Opera 9.6+

Gecko is the most supportive engine and use own rule. ::-moz-selection { } .The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them. Normally two separate rules must be written to cross browsers.

::selection { background-color: #006fb4; } ::-moz-selection { background-color: #006fb4; /* Gecko Browsers */ }

Note: The ::selection pseudo-element was drafted for CSS Selectors Level 3, but removed before the Recommendation status. So, at the moment, the ::selection pseudo-element is not in any specification. (However, it may be re-added to future CSS specifications.)

Within the text selection selector, actually color and background are the only properties that work. What you can do some extra things, are change the selection color for different paragraphs or different input,textarea of the page.

Few different example for text selection color for different tags: p::selection { background-color: #2591cb; color: #f4faff; } p::-moz-selection{ background-color: #2591cb; color: #f4faff; } input[type=text]::selection ,input[type=password]::selection,textarea::selection { background-color: #747576; color: #e4e4e4; } input[type=text]::-moz-selection,input[type=password]::-moz-selection,textarea::-moz-selection{ background-color: #747576; color: #e4e4e4; } .error::selection { background-color: #d90101; color: #ffffff; } .error::-moz-selection{ background-color: #d90101; color: #ffffff; } .success::selection{ background-color: #016a00; color: white; } .success::-moz-selection{ background-color: #016a00; color: white; } a::selection{ color: #00189d; } a::-moz-selection{ color: #00189d; } Note: Do not write the text selection rules with combined, even though the style block is doing the same thing. It doesn't work if you combine them: /* This will be incorrect */ p::selection, p::-moz-selection { background: #006fb4; } That's because browsers ignore the entire selector if there is a part of it they don't understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors.
asked 4 months,13 days ago

What is the codrate ?

codrate.com is a standard, fast cross browsing and highly versatile site. It is useful for many large number of Program Development Industries. So you can get support form Codrators , who are the codrate's joiners around world to help your program developments, You can answer other codrator's questions. Communicate with them. Share your knowledge with them. Do you have an interest in programming, So publish your articles about programming. It will help to maintain your professional co-profile. Actually codrate.com is not such as a regular web site. It will be gave new experience, best narrow cross-browser view, reduce processing time to receive browsing request, it's mean do not wasting your time to browsing codrate's web pages because it has been upgrade always modern coding ways. So, what do you waiting for ?. Try your own.

Copyright 2015 Pride - Company. Design by Esila