Question

我在我的网站上使用CSS :: selection规则使用自定义高亮颜色，但注意到在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似乎也突出了允许::选择的元素上的元素填充和边距，根据您的设计，它可能看起来很漂亮。

Answer 2

为什么不使用子弹的图像而不是默认的子弹？有点像...

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

CSS ::选择自定义颜色列表编号＆amp; webkit浏览器中的子弹？

2 个答案: