Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 ::selection behaves differently in FF & Chrome

I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background.

I set the selection so that it looks like this in FF.

enter image description here

But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transparent the resultant color is nasty.

enter image description here

Does anyone know if it's possible to get chrome to behave the same as Firefox.

For reference here is my css:

p::-moz-selection { background:#FFFF7D; color:#032764; } p::-webkit-selection { background:#FFFF7D; color:#032764; } p::selection { background:#FFFF7D; color:#032764; } 

Thanks

like image 632
madcapnmckay Avatar asked Aug 28 '11 22:08

madcapnmckay


1 Answers

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: http://jsfiddle.net/tw16/m8End/

p::-moz-selection {     background:rgba(255, 255, 125, 0.99);     color:#032764; } p::-webkit-selection {     background:rgba(255, 255, 125, 0.99);     color:#032764; } p::selection {     background:rgba(255, 255, 125, 0.99);     color:#032764; } 
like image 102
tw16 Avatar answered Sep 22 '22 22:09

tw16