Home/ Questions/Q 6883857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:26:05+00:00

I changed the text highlight color using ::selection , which works pretty in my

  • 0

I changed the text highlight color using ::selection, which works pretty in my page. However, I found the Chrome behaves different from FF, which highlight the <br> with default blue color instead of the color I set for all the elements. FF doesn’t hightlight the <br> so it works fine.

I tried to override the ::selection for <br>, doesn’t work; Tried to use user-select:none;, doesn’t work either; Tried display:none;, which simply made my <br> all disappeared…

Any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you would need read this question with all its answers.

    By the way if you need to simulate this behavior in Chrome I think you can simulate a <br/> with <span>. Something like this:

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.normal::selection {
    background:#cc0000;
    color:#ff0;
}
p.normal span::selection {
    background:#cc00ff;
    color:#ff0;
}
p.normal span {
    width:100%;
    clear:left;
    display: block;
    height: 1em;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#ff0;
}

p.webkit::-webkit-selection {
    background:#cc0000;
    color:#ff0;
}
</style>
</head> 
<body>
    <p class="normal">Hello Normal
    <span></span>
    <span></span>
    <span></span>
    How are you?
    </p>
    <p class="moz">Hello Mozilla
    <br/>
    <br/>
    <br/>
    How are you?
    </p>
    <p class="webkit">Hello Webkit
    <br/>
    <br/>
    <br/>
    How are you?
    </p>
</body>
</html>

    EDIT:

    After several tests, I concluded that to replicate the behavior in Chrome you would need a javascript that replicate this styles.

    EDIT2:

    To remove the pink border in the second line I make another demo (I think it’s more clear).

    • 0