CODEWITHSUNDEEP
csswebkitmozillapseudo-element
daysrunaway
daysrunaway

Reputation: 742

Changing border-color on selection

I'm trying to modify the default selection styles by using the ::selection and ::-moz-selection pseudoelements. I've successfully changed the selection color and background with these two rules:

::-moz-selection{ background: #444; color:#fff; text-shadow: none; }
::selection { background:#444; color:#fff; text-shadow: none; }

However, I also need to change the border-color to white on selection for links. I'm trying to accomplish this with this CSS:

a::-moz-selection { border-color:#FFF;}
a::selection {border-color:#FFF; }

Even when I add an !important override, Safari won't style the border color.

What am I missing? Why can't I change a link's border-color on selection?

Upvotes: 1

Views: 3378

Answers (1)

BoltClock
BoltClock

Reputation: 723448

You can't define border styles for text selections.

Try defining an outline instead (it was going to be one of the allowed properties as stated in the old spec and the SitePoint Reference):

a::-moz-selection { outline: 1px solid #fff; }
a::selection { outline: 1px solid #fff; }

If that doesn't work, then I'm afraid the browser just doesn't support outlines on ::selection.

Remember that ::selection has been move out of the Selectors spec, with the rest of CSS level 3 still being a draft, so you can't rely on browsers implementing it correctly/completely just yet.

Upvotes: 3

Related Questions