11

我使用 CSS ::selection 规则在我的网站上使用自定义突出显示颜色，但注意到在 Webkit 浏览器中，选择颜色并不完全适用于所有内容。

这是一个显示我的意思的小提琴，以编号列表为例：http: //jsfiddle.net/ufGmP/

如果您在 Chrome 或 Safari 中突出显示文本，则会在项目符号周围看到默认的蓝色突出显示颜色。我在使用 ::selection 覆盖默认颜色时发现的每个站点上都注意到了这个问题；例如，在http://www.smashingmagazine.com/上，如果突出显示故事的整个标题，则可以看到默认选择颜色。

有人知道解决这个问题的方法吗？任何帮助将不胜感激！

4

2 回答 2

7

这是一个自 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 似乎还突出了允许 ::selection 的元素上的元素填充和边距，这取决于您的设计。

于 2012-08-31T04:26:09.063 回答
1

为什么不使用图像作为项目符号，而不是默认项目符号？就像是...

list-style:none;
padding-left:20px;
background:url(something.gif) 0 50% no-repeat
于 2012-08-31T04:10:01.733 回答