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

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.

CodePudding user response：

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>

CodePudding user response：

Am not sure if this is what you want, but please below my solution.

const containerBlock = document.querySelector('.random-colors');

containerBlock.addEventListener("mousedown", () => {
  const mode = containerBlock.getAttribute('mode') || 1;
  const modeNumber =  mode;
  containerBlock.setAttribute('mode', modeNumber === 6 ? 1 : modeNumber   1);
});

.random-colors[mode="1"]::selection {
  background-color: #ffce00;
  color: #000;
}

.random-colors[mode="2"]::selection {
  background-color: red;
  color: #000;
}

.random-colors[mode="3"]::selection {
  background-color: blue;
  color: #000;
}

.random-colors[mode="4"]::selection {
  background-color: cyan;
  color: #000;
}

.random-colors[mode="5"]::selection {
  background-color: pink;
  color: #000;
}

.random-colors[mode="6"]::selection {
  background-color: violet;
  color: #000;
}

<div  mode="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit condimentum faucibus. Mauris a hendrerit dolor. Pellentesque eget massa dignissim, fermentum enim sit amet, rutrum massa. Sed in porttitor felis. Quisque feugiat ultricies tortor, vel
  blandit quam tempor vel. In ac dapibus nibh. Nunc sit amet scelerisque sapien, a porttitor eros. In efficitur condimentum diam, non tempus massa finibus sed. Nam cursus turpis augue, ut varius tellus venenatis eu. Vestibulum blandit felis eget aliquet
  mattis. Aenean leo ipsum, volutpat nec ultricies a, mattis at diam. Sed a blandit diam. Nunc rutrum viverra condimentum. Sed at semper arcu. Cras non auctor massa. Pellentesque mollis egestas diam, nec ullamcorper arcu commodo vel. Curabitur sed porta
  urna, ac tempus sem. Donec pharetra, nulla ac pellentesque mollis, magna lacus suscipit leo, sit amet euismod orci quam ac erat. Sed tempus consectetur tellus viverra condimentum. Curabitur accumsan vitae dui sed tincidunt. Nullam lorem ante, sollicitudin
  eu volutpat at, iaculis vitae sem. Aliquam et elementum velit, sit amet elementum odio. Morbi ut cursus velit. Phasellus lacinia, velit a varius aliquam, justo dui egestas dolor, sagittis auctor tellus nisl vel ex. Morbi placerat elit in tortor euismod
  scelerisque. Nam tempor turpis vel nunc convallis, vel ullamcorper quam feugiat. Praesent congue est odio, sed gravida purus ornare quis. Quisque sed commodo nunc. Mauris enim enim, euismod in nisi vel, tristique molestie turpis. Ut maximus erat tellus,
  sed pellentesque est pellentesque non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla placerat felis eu ex sodales, ut sagittis lorem molestie. Curabitur condimentum ipsum tellus, eget tristique purus cursus
  sodales. Proin sodales sem sed augue viverra, non egestas lorem bibendum. Nullam odio leo, convallis sit amet posuere ut, cursus ac leo. Phasellus tempor, urna sit amet elementum luctus, ex sem ultrices justo, quis placerat urna lectus quis mauris.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque gravida nec justo nec pulvinar. Curabitur quis luctus leo. Ut malesuada et magna et laoreet. Fusce laoreet blandit semper. Morbi et nibh condimentum,
  blandit arcu at, tristique nunc. Aliquam tincidunt vehicula diam, nec porta elit mattis non. Nunc ut sodales erat. Suspendisse placerat, risus in iaculis blandit, libero libero porta arcu, ac cursus purus enim non urna. Quisque rutrum auctor elit quis
  ultricies. Phasellus tincidunt nec mi et facilisis. Mauris faucibus faucibus massa in dignissim. Sed turpis nisl, ornare et egestas egestas, porttitor at lectus. Etiam lobortis ante orci, et facilisis quam scelerisque sit amet. Etiam eu rhoncus lorem.
  Vivamus imperdiet mi vitae ipsum convallis mattis. Morbi non metus ac odio pellentesque scelerisque.
</div>

CodePudding user response：

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

CodePudding user response：

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>