::selection not working correctly on line break-CodePudding

I am using ::selection to alter the color of the highlight, since the default blue doesn't really work in my color theme. However, when I have multiline text with <br> (or \n from js, which just gets converted to <br>) the line breaks are always the default blue.

<!DOCTYPE html>
<html lang="en">
<body>
      <div >Try<br>selecting<br>me.</div>
</body>
<style>
.selector::selection {
    background-color: #8d8d8d;
}
</style>
</html>

How can I make all the selected text including line breaks the same color?

CodePudding user response：

Add an additional .selector *::selection selector to the css that will define all child elements inside .selector.

<!DOCTYPE html>
<html lang="en">
<body>
      <div >Try<br>selecting<br>me.</div>
</body>
<style>
.selector::selection,
.selector *::selection {
    background-color: #8d8d8d;
}
</style>
</html>

CodePudding user response：

Try this one:

 <!DOCTYPE html>
  <html lang="en">
  <head>
  <style>
    .selector::selection, .selector *::selection {
      background-color: #8d8d8d;
    }
  </style>
  </head>
  <body>
        <div >Try<br>selecting<br>me.</div>
  </body>
  </html>