All geek questions in one place

Css: how to make it not stand out when choosing text (in Chrome)

I changed the text selection color with ::selection , which works very well on my page. However, I found that Chrome behaves differently from FF, which highlights <br> with a default blue color instead of the color set for all elements. FF doesn't light <br> , so it works great.

I tried to override ::selection for <br> , does not work; Tried to use user-select:none; also does not work; Tried display:none; that just made my <br> all disappear ...

Any idea?

+6
source share
4 answers

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

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

 <!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 came to the conclusion that in order to repeat the behavior in Chrome you will need javascript that replicates these styles .

EDIT2:

To remove the pink border in the second line, I create another demo (I think this is more understandable).

+2
source

Socket <br> as a child of <p>

 ::selection { background: chartreuse; } div { padding: .3em; } div + div { border-top: 1px solid lightgray; } p { margin: 0; } code:before { content: "<"; } code:after { content: ">"; } 
 <div> <p>Layout is fine</p> <br> <p>but selection <del>isn't</del> <ins>wasn't (fixed in Chrome as of v 59.0.3071.115 or earlier)</ins></p> </div> <div> <p>One <code>br</code> in it own <code>p</code> between this <code>p</code> </p> <p><br></p> <p>and this one</p> </div> <div> <p>Two <code>br</code>s nested in the end of this <code>p</code><br><br></p> <p>No <code>br</code>s in this <code>p</code>, and nothing between the <code>p</code></p> </div> <div> <p>No <code>br</code>s in this <code>p</code>, and nothing between the <code>p</code>s</p> <p><br>One <code>br</code>s nested in the start of this <code>p</code></p> </div>
0
source

You can use <hr/> to replace <br /> and then set its opacity to 0. Like here .

0
source

You can just set everything <br> be not 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>
0
source

Source: https://habr.com/ru/post/902578/

More articles:


All Articles