6

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?

Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
Dante Y
  • 101
  • 1
  • 8
  • I think it may just be a bug, but I hope someone can prove me wrong. – bookcasey Nov 28 '11 at 17:16
  • @bookcasey I suppose this is a bug and I will submit it to Google I guess. – Dante Y Nov 28 '11 at 20:44
  • 1
    The temporary solution: using `margin: 0;` in `

    ` tag css to add a margin-top to every `

    ` tag instead of `
    `. Works on both FF/Chrome for now.

     – Dante Y Nov 28 '11 at 20:46
  • @DanteY I can't make to work --> http://jsfiddle.net/Galled/xEF7h/55/ – Galled Nov 28 '11 at 21:00
  • @Galled maybe I didn't make myself clear. This WILL still select the "blank", but now the blank will be in the same color as the highlight color you set for `::selection` – Dante Y Nov 28 '11 at 21:08
  • @DanteY ah ok! You are making the inverse, trying Firefox behaves like Chrome. – Galled Nov 28 '11 at 21:15
  • @Galled actually for both impl FF works normally (which the blank will not be selected, and the highlight would not overlays area outside of current div). I suppose this is a bug with Chrome rendering. – Dante Y Nov 29 '11 at 20:08

4 Answers4

2

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>
Ryan Buech
  • 21
  • 3
2

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

Community
  • 1
  • 1
Galled
  • 4,146
  • 2
  • 28
  • 41
  • Thanks for the feedback. However it doesn't really work out. I read the post before posting this and I tried `br::selection` as I mentioned in 2nd paragraph. I can see the override properties in firebug, but it is ignored by Chrome. Also I tried your `` solution, not working either when I added `backgroud:xffffff` for `span.br::selection`, or added `-webkit-user-select:none`. – Dante Y Nov 28 '11 at 18:44
  • Well the idea is use the `` instead `
    `.     – Galled Nov 28 '11 at 19:05
  • yes, I edit a bit your code and add new class called `span.br` and tried to add all properties I tried with `
    ` on it. In Chrome it is still selectable and highlight color doesn't change even you set a new one(e.g. your #cc0000).     – Dante Y Nov 28 '11 at 19:23
  • @DanteY I updated my answer and I don't believe that the only way are CSS in Chrome. – Galled Nov 28 '11 at 20:20
  • Thanks it works. However I cannot get rid of the pink upper border which looks wired. Additionally this is really considered "hacked css". I will post my solution in my original post. Thanks for your answer though. – Dante Y Nov 28 '11 at 20:42
  • @DanteY I post another demo without the pink border. I could never imagine that Chrome would have problems with things like these. – Galled Nov 28 '11 at 20:52
0

Nest <br> as the child of a <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's 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>
Community
  • 1
  • 1
Fred Gandt
  • 4,217
  • 2
  • 33
  • 41
0

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

dayuloli
  • 16,205
  • 16
  • 71
  • 126