Блог

Главная - Вопросы по программированию - Стиль выделения CSS удаляет другие стили

Стиль выделения CSS удаляет другие стили

#css

#css

Вопрос:

Я работаю над текстовым редактором с пользовательской проверкой орфографии. Он добавляет класс css вокруг слов с ошибками, чтобы показать красный зигзаг под словом.

Я также использую класс для стилизации выделений в редакторе с помощью пользовательского цвета фона.

 .spell-error {
  background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw=="); 
  background-position: bottom; 
  background-repeat: repeat-x;
}

::selection {
  background-color: #99def7;
}
::-moz-selection {
  background-color: #99def7;
} 
 <p>There is a <span class="spell-error">misstake</span> in this sentence</p>

Проблема в том, что когда я выделяю слово .spell-error красным зигзагом, исчезает. Я пытался создать .spell-error::selection класс, но проблема сохраняется. Как я могу сделать так, чтобы оба класса отображались одновременно?

Комментарии:

1. Опубликованный вами код работает для меня в Chrome 87 в Windows 10. Похоже, что конфликта между вашим selection селектором псевдоэлементов и вашим spell-error классом нет.

2. Если какой-то ответ помог вам, пожалуйста, отметьте его как правильный.

Ответ №1:

У background-image вас будет белый фон, который перекрывает цвет фона.
У вас должно быть определенное фоновое изображение для .spell-error::selection , которое имеет правильный цвет фона в фактическом изображении.