Вопрос по css, html – Изменить цвет выделения текста с помощью CSS?

28

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

У меня это несколько работает. Это (часть) код в моей таблице стилей:

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

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

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

picture of website

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

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

фрагмент:

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

::-moz-selection {
    background: #FF0099;
    color: #EEE;
    text-shadow: none;
}
<p>sample</p>
<br />
<p>sample2</p>

Вещи, как это именно поэтому они упали::selection из спецификации :) BoltClock♦
@MrLister Я не согласен, по моему мнению, это показывает проблему. Вот скриншот того, что я вижу, когда выделяю вывод:i.imgur.com/UHOyN.png (Вы можете ясно видеть синее пространство между двумя розовыми областями выделенной области). Bhaxy
Синий выглядит как элемент HTML. Starx
@Starx Я просто выделил текст, стиль щелчка и перетаскивания. Bhaxy
@Bhaxy, как ты получил этот синий на картинке? Starx

Ваш Ответ

6   ответов
0

если тыreally Для этого есть некоторые вещи, которые вы можете сделать в элементах (не :: 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 */
}
... это было исправлением для проблемы, упомянутой в этом вопросе, синяя часть не произошла с этим исправлением, по крайней мере, 3 года назад, как это было. Спасибо за отрицательное голосование.
Где это связано с вопросом?
0

который я пробовал, он работает нормально.

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

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

::selection (or whatever selection you might use)

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

Не работает; не то же самое.
Аа, ты имеешь в виду, что это не помечает область между текстом? Я не знаю, есть ли что-нибудь, чтобы заставить это работать. знак равно
добавить & quot; :: - moz-selection & quot;
Ухоженная. Моя первая реакция была: нет, это не может быть так просто. Но, видимо, это так! +1. Можете ли вы заставить его работать так же в Firefox?
8

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

Смотрите дляБолее детально

нет необходимости в* перед:: персонажи
0

<br /> с запасом на<p> элементы.

Вот рабочаяFiddle Demo

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;
}
5
/*** 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;
}

Похожие вопросы