Shiva Shiva - 1 year ago 60
CSS Question

CSS3 ::selection selector not working properly on anchor tags

I am using the CSS3

Selector like this


::-moz-selection {


So when some element is selected it should change its color to red and the background to pink.

It works as expected for everything other than the Anchor tag

When an anchor text is selected, it applies the style to the link text but not on the line beneath the anchor text.


So how can we apply the style to the underline also?

PS: Browsers tested: chrome 31 and firefox 25.0.1

Answer Source

Note that per MDN

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background, background-color and text-shadow. Note that, in particular, background-image is ignored, like any other property.

The line on your link is part of text-decoration which is not taken into consideration by the pseudo selector. Your best bet would perhaps be to remove it using


You may want to also note:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase (link)

The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.

Further information

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download