css: how to make <br> not highlighted when selecting text (in Chrome)

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).


You can just set all <br> to be non selectable in css like so.

br
{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
<p>Run the snippet to see for yourself.</p>
<br>
<p>See?</p>

Tags:

Html

Css

Recent Posts