How to get ::selection to work correctly with hyphenation?

Question

I want to style selected text differently, and I'm using ::selection to achieve that.

*::selection, *::-webkit-selection, *::-moz-selection {
    background-color: #aaa;
    color: #fff;
}

For typographical reasons, I'm using hyphens: auto; for paragraphs.

p {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
}

This works, but there is a problem when I select hyphenated text: the hyphens don't get colored white (i.e. they act as if they were unselected).

Screenshot demonstrating problem with hyphenated text.

Is there a way to fix this problem, or is this a bug? I'm using Safari 5.1.7.

FYI, two things: 1) [`::-webkit-selection` doesn't exist](http://stackoverflow.com/questions/7545550/has-the-webkit-selection-selector-ever-been-supported) 2) [You need to separate the rules for `::selection` and `::-moz-selection` for it to work in Firefox](http://stackoverflow.com/questions/5302172/firefox-moz-selection-selector-bug-is-there-a-workaround) — BoltClock, Jul 01 '12 at 13:49

Christoph · Accepted Answer · 2012-07-01T19:54:46.563

0

I think this is probably a bug. Firefox, which supports hyphenation as well, colors the hyphens correctly.

edited Jul 01 '12 at 19:54

answered Jul 01 '12 at 12:47

Christoph

You may want to modify the fiddle such that the code actually works in Firefox. See my comment above. – BoltClock Jul 01 '12 at 13:56

1 Answers1