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.
But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transparent the resultant color is nasty.
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
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With