Menu
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?
786
You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
Answer: Use the CSS ::selection pseudo-element By default, when you select some text in the browsers it is highlighted normally in blue color. But, you can disable this highlighting with the CSS ::selection pseudo-element.
Select the text that you want to remove highlighting from, or press Ctrl+A to select all of the text in the document. Go to Home and select the arrow next to Text Highlight Color. Select No Color.
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).
53
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
