Question

I’m using a custom highlight color on my site with the CSS ::selection rule, but noticed that in Webkit browsers the selection color doesn’t exactly work on everything.

Here’s a fiddle showing what I mean, using a numbered list as an example: http://jsfiddle.net/ufGmP/

If you highlight the text in Chrome or Safari, the default blue highlight color is seen around the bullets. I’ve noticed this issue on every site I’ve found using ::selection to override the default color; for instance, on http://www.smashingmagazine.com/ the default selection color can be seen if the entire headline of a story is highlighted.

Does anybody know a way around this? Any help would be much apprecaited!

Answer 1

It’s a bug that’s been hanging around from 2010, https://bugs.webkit.org/show_bug.cgi?id=38943.

A number of elements fail to highlight, here’s a fiddle, http://jsfiddle.net/AULsp.

HTML

<input type="text" value="This doesn't get highlighed." />
<textarea>This doesn't get highlighed either.</textarea>
<p>This does get highlighted.</p>
<ul>
    <li>The bullets however, don't.</li>
    <li>This bullet concurs.</li>
</ul>

<ol>
    <li>And so does this one.</li>
    <li>And finally, this one.</li>
</ol>
    ​

CSS

body {
    padding:40px;            
}

::-moz-selection{
    background: #900;
    color: #fff;
}

::selection {
    background: #900;
    color: #fff;
    text-shadow: none;
}
input, textarea, ul, ol, p {
    display:block;            
    width:200px;
    margin: 0 0 15px;
}

ul {
    list-style:disc;       
}

ol {
    list-style:decimal;
}

WebKit also seems to highlight element padding and margin on the elements that do allow ::selection, which can look pretty off depending on your design.