Как сделать бэкграунд при выделении разноцветным?

Question

[RimMirK]

пробовал так

<style>
p {
    font-size:60pt;
    padding: 1em;
}

p::selection {
    
    background-color: linear-gradient(to right, #ff0000, #fff200, #1e9600); /*| не работает |*/
    background:       linear-gradient(to right, #ff0000, #fff200, #1e9600); /*| не работает |*/

    background-color: #ff0000, #fff200, #1e9600; /*| не работает |*/
    background:       #ff0000, #fff200, #1e9600; /*| не работает |*/


    background-color: #ff0000 #fff200 #1e9600; /*| не работает |*/
    background:       #ff0000 #fff200 #1e9600; /*| не работает |*/


    background-color: #ff0000; /*| работает, выделяет красным |*/
    background:       #ff0000; /*| работает, выделяет красным |*/

}

</style>

<p>
Lorem, ipsum dolor, sit amet consectetur adipisicing elit.
Qui iusto provident ea assumenda, 
autem doloribus minus possimus quidem dolorum nulla laudantium, 
asperiores rem neque sed. 
Mollitia ratione est nesciunt fugit!
</p>

результат хочу такой
или такой

дополнено: из ответа ниже, понял, что через css это сделать невозможно. может, через js можно?

Answer 1

[lx0]

С помощью ::selection такое не сделать
https://developer.mozilla.org/en-US/docs/Web/CSS/%...

In particular, background-image is ignored.

А такая запись, на сколько я знаю, не валидна
background-color: #ff0000, #fff200, #1e9600;

Comments

[RimMirK]

А такая запись, на сколько я знаю, не валидна

знаю, но а вдруг сработает)