How to change the background color of the selected text in browsers?

We all know that when we select a text portion in browser, its background color changed to blue. Is it a way to change this color through CSS or Jav开发者_Python百科aScript?

Yes: you can use the ::selection and ::-moz-selection pseudo-elements (MDN), which allows you to specify the foreground and background colours of selected content. This will work in all major browsers except IE < 9, for which there is no alternative.

::selection {
    background: pink;
    color: yellow;
}

::-moz-selection {
    background: pink;
    color: yellow;
}

Internet Explorer for Windows

1.From the Tools menu, select Internet Options... .

2.Click the General tab, and then click the Colors... button. You may select the visited, unvisited, and hover colors. Uncheck Use Windows colors if you'd also like to set custom text and background colors. Click OK. Note: In Internet Explorer 7 or higher, you will need to uncheck Use Windows colors to modify any of the default colors.

3.If you'd like to override the colors set by pages with your own, click Accessibility... , and then check Ignore colors specified on Web pages. Click OK.

4.Click OK to save your changes and close the Internet Options window. Safari Safari does not allow you to easily change the background, text, visited link, and unvisited link colors. However, you can use your own style sheets to view web pages:

From the Safari menu, select Preferences... .

2.In the window that opens, click Advanced.

3.From the pull-down menu next to "Style Sheet:", select Other... , and then navigate to the style sheet you wish to use.

4.Click Choose.

Firefox 3.x

1.If you are using Windows or Linux, from the Tools menu, select Options... . In Mac OS X, from the Firefox menu, select Preferences... .

2.Click Content. Under "Fonts & Colors", click Colors... .

3.Select the colors for background, text, visited links, and unvisited links.

4.If you'd like to override the color settings of sites with your own, uncheck Allow pages to choose their own colors, instead of my selections above.

For a most completely work, you can use multiple selectors with the same function but used in different browsers:

::selection {
    background: orange;
    color: white;
}

::-moz-selection {
    background: orange;
    color: white;
}

::-webkit-selection {
    background: orange;
    color: white;
}

::-o-selection {
    background: orange;
}

::-ms-selection {
    background: orange;
    color: white;
}

-moz- Firefox.

-webkit- Safari and Chrome.

-o- Opera.

-ms- Internet Explorer.