CSS:: выбор пользовательского цвета в номерах и марках списка в браузерах webkit?

Я использую пользовательский цвет выделения на моем сайте с помощью правила CSS:: selection, но заметил, что в браузерах Webkit цвет выделения не совсем работает на все.

Вот скрипка, показывающая, что я имею в виду, используя нумерованный список в качестве примера: http://jsfiddle.net/ufGmP/

Если вы выделите текст в Chrome или Safari, синий цвет подсветки будет отображаться вокруг пуль. Я заметил эту проблему на каждом найденном мной сайте, используя:: selection, чтобы переопределить цвет по умолчанию; например, на http://www.smashingmagazine.com/ цвет выделения по умолчанию можно увидеть, если выделен весь заголовок истории.

Кто-нибудь знает об этом? Любая помощь будет очень благодарна!

Ответы

Ответ 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 также, как представляется, выделяет элементы и поля для элементов, которые позволяют:: selection, которые могут выглядеть довольно красиво в зависимости от вашего дизайна.

Ответ 2

Почему вы не используете изображение для пули вместо пули по умолчанию? Что-то вроде...

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