Изменение цвета выделения текста с помощью CSS?

В настоящее время я работаю над веб-сайтом, и я хочу изменить цвет выделения текста.

Я немного работаю. Это (часть) кода в моей таблице стилей:

::selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: #FF0099;
  color: black;
  text-shadow: none;
}

Он производит в основном удовлетворительный результат. Однако в некоторых случаях подсветка, кажется, теряет свой заданный цвет (# FF099), как показано на этом рисунке:

Как вы можете видеть на рисунке выше, текст полностью подсвечивается с использованием правильного цвета (# FF099); однако область между текстом тела и заголовком, а также слева от основного текста выделяется цветом по умолчанию (синего). Как я могу сохранить части подсветки от возврата к умолчанию?

изменить: увеличенное изображение доступно на http://i.imgur.com/NmZIf.png

edit: jsFiddle sample: http://jsfiddle.net/VUuFR/

Ответ 1

Я раньше бродил по этой проблеме, и получается:

::selection (or whatever selection you might use)

не работает с тегом break line (br).. удаляет их и вместо этого использует поля. =) Вот скрипка для демонстрации: Пример

Ответ 2

Попробуйте следующее:

<style>
*::selection {
  background: #cc0000;
  color: #ffffff;
}
*::-moz-selection {
  background: #cc0000;
  color: #ffffff;
}
*::-webkit-selection {
  background: #cc0000;
  color: #ffffff;
}
</style>

Подробнее см. Подробнее

Ответ 3

/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}

Ответ 4

У меня была такая же проблема.

Если вы действительно этого хотите, некоторые элементы, которые вы можете сделать в элементах (not:: selection), у вас возникают проблемы с:

div {
    position: relative; /*Use it as much as you can*/
    height: 100px; /* or max-height instead of margin or br */
    line-height: normal; /* keep line-height normal*/
    -webkit-transform: translate(0px,0px); /* This hack can work */
    -moz-transform: translate(0px,0px); /* hack moz */
    transform: translate(0px,0px); /* hack prefixless */
}

Ответ 5

Вы можете использовать селектор CSS ::selection. Это соответствует всему тексту, выбранному пользователем. Несмотря на то, что он не является частью спецификации CSS3, он поддерживается в IE9 +, Opera, Google Chrome и Safari. Firefox поддерживает префикс ::-moz-selection.

Дополнительные сведения и примеры: http://www.snippetsource.net/Snippet/86/change-color-of-selected-text

Ответ 6

Попробуйте заменить маркер <br /> на элементы <p>.

Вот рабочий Скриншот

HTML

<p>sample</p>
<p>sample2</p>

CSS

p {margin-bottom:50px;}
::selection {
    background: #FF0099;
    color: black;
    text-shadow: none;
}
::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}

Ответ 7

Я бы предложил следующий код, я пробовал работать.

Вот ссылка с живой рабочей программой Изменение цвета выделения текста с помощью CSS

    ::selection
    {
        background: #FF0099;
        color: black;
        text-shadow: none;
    }
    ::-moz-selection
    {
        background: #FF0099;
        color: #EEE;
        text-shadow: none;
    }
    p
    {
        margin-bottom: 50px;
    }