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 に答える