11

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!

1
  • 1
    heck yeah! good question. GMV
    – MicronXD
    Aug 31, 2012 at 3:45

2 Answers 2

7

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.

1
  • Damn, that's too bad to hear. Thank you for the detailed information about it, though!
    – R.J.
    Aug 31, 2012 at 4:30
1

Why don't you use an image for the bullet, instead of the default bullet? Something like...

list-style:none;
padding-left:20px;
background:url(something.gif) 0 50% no-repeat

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.