CSS ::选择webkit浏览器中的列表编号和项目符号的自定义颜色？

Question

我在我的网站上使用CSS ::选择规则使用自定义高亮颜色,但注意到在Webkit浏览器中,选择颜色并不完全适用于所有内容.

这是一个显示我的意思的小提琴,使用编号列表作为示例:http://jsfiddle.net/ufGmP/

如果您在Chrome或Safari中突出显示文字,则子弹周围会显示默认的蓝色突出显示颜色.我已经注意到这个问题在我发现的每个网站上都使用:: selection来覆盖默认颜色; 例如,在http://www.smashingmagazine.com/上,如果突出显示故事的整个标题,则可以看到默认选择颜色.

有人知道解决这个问题吗？任何帮助都会得到很多帮助!

Answer 1

这是一个从2010年开始流传的错误,https://bugs.webkit.org/show_bug.cgi？id = 38943.

许多元素都没有突出,这里有一个小提琴,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似乎也突出了允许::选择的元素上的元素填充和边距,根据您的设计,它可能看起来很漂亮.