Блог

Я создаю веб — страницу с пользовательским цветом выбора.

 ::selection {
    background-color:#00ffff;
}
 

Но взгляните на этот сценарий:

 p::after {
    content:"Try selecting the above elements. The underline is not preserved, but the italic is preserved."
}
::selection {
    background-color:#00ffff;
    text-decoration:auto;
} 

 <u>Select me!</u>
<i>Select me!</i>
<p></p> 

Итак, как мне сохранить подчеркивание в выделенном тексте?

 Update:
I'm using Chrome 92.0.4479.3 (canary build) on Microsoft Windows 10 Home.
Screenshot:
 

Вам просто нужно установить цвет фона выделения в режиме rgba или hsla или даже шестнадцатеричный код с дополнительными 2 цифрами для значения альфа(любой режим, в котором вы можете установить значения альфа) и уменьшить значение альфа с 1. Значение Альфа около 0,5 показалось мне подходящим. Слишком высокое значение альфа скроет подчеркивание под выделением.

Вместо использования автоматического использования наследования для оформления текста, как это :

 ::selection{
      background-color: #00f;
      text-decoration: inherit;
    }
 

Таким образом, он должен наследовать текстовое оформление родительского элемента.