Change Text Selection Color on Webpage
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.
JOIN OVER 100,000 CODRATE USERS
Who get fresh code scripts from codrate!
Will send your codrate site configuration email in your mail account.
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.