Question

0

336

Views

How to make ::selection background and text change randomly based on specific colors

I'm trying to change the ::selection background and text of my website using JS. I want to make the selection background and text change randomly based on the colors I already chose. I have the color changed using just CSS, like this:

::selection {
    background-color: #ffce00;
    color: #000;
}

::-moz-selection {
    background-color: #ffce00;
    color: #000;
}

::-o-selection {
    background-color: #ffce00;
    color: #000;
}

::-ms-selection {
    background-color: #ffce00;
    color: #000;
}

::-webkit-selection {
    background-color: #ffce00;
    color: #000;
}

But I want the color to be changed in each new selection made, like this :

I'd appreciate it if anyone could help. Thank you.

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

p:nth-child(4n+1)::selection {
  color: red;
}
p:nth-child(4n+2)::selection {
  color: green;
}
p:nth-child(4n+3)::selection {
  color: orange;
}
p:nth-child(4n+4)::selection {
  color: blue;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, est!</p>

Try to use nth-child

over 4 years ago · Santiago Trujillo Report

0

You can update css variable through Javascript as well.

let root = document.documentElement;

document.querySelector('p').addEventListener("mousedown", e => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  root.style.setProperty('--highlight-color', '#'+randomColor);
});

:root {
  --highlight-color: red;
}

p::selection {
  background: var(--highlight-color);
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

over 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-03-25T16:00:57.575Z

You could use insertAdjacentHTML to overwrite the previous style with Javascript:

window.colors = ['#9ACD32','Chocolate','DeepPink','LightSkyBlue','BurlyWood','GreenYellow','Plum','Coral','CornflowerBlue','IndianRed']
window.order = 0

document.addEventListener("mousedown", function() {
document.head.insertAdjacentHTML('beforeend', '<style>::selection { background-color:' + window.colors[window.order] + '} ::-moz-selection { background-color:' + window.colors[window.order] + '} ::-o-selection { background-color:' + window.colors[window.order] + '} ::-ms-selection { background-color:' + window.colors[window.order] + '} ::-webkit-selection { background-color:' + window.colors[window.order] + '}</style>');
window.order = window.order + 1
if (window.order > window.colors.length - 1){
window.order = 0
}
});

<p>Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. </p>

<p>Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. Text text text and more text. </p>

0

336

How to make ::selection background and text change randomly based on specific colors

3 answers

0

0

0

Find remote jobs

Andres GPT