Friday, April 2, 2010

Change the Color & Backgraound of slected text in Browser.

I was wondering how to define color and background for text the user selects.

Try it in this in your CSS. If you select something and it will change its background to red and text to white, your browser supports selection styles.

::-moz-selection{
background:#cc0000;
color:#fff;
}

::selection {
background:#cc0000;
color:#fff;
}

code::-moz-selection {
background: #333333;
}

code::selection {
background: #333333;
}


Of course Mozilla needs a special ::-moz-selection selector, while Safari keeps it simple. The selector only seems to accept color and background. I defined a grey background for code elements with the code::[-moz-]selection syntax.