Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the color of highlighted/selected text

Tags:

css

I would like to change the color of highlighted text on my page.

Currently, this is how I am approaching this:

::selection, ::-moz-selection {
    background-color: #ffffff;
}

Unfortunately, I am running into problems where I am unable to change the background color of highlighted text if strings are separated by a linebreak, like so:

Hello
  World

An example of this can be found on my current web application project: http://term.qt.io by doing CTRL+A (Select-All for most browsers) to highlight all the text. You will notice that it appears gray in some areas but blue in others. I would like all the highlighted text to be a gray background rather than blue in some areas.

enter image description here

like image 526
Zack Zatkin-Gold Avatar asked Nov 26 '25 18:11

Zack Zatkin-Gold


1 Answers

The use of the span is what's breaking it. Coding it like this works fine:

<p class="prompt">Welcome to term.
    <br>
    <br>
    login as: <span class="input blinker">&nbsp;</span>
</p>

And it's better semantics IMO.

like image 71
Dawson Avatar answered Nov 28 '25 15:11

Dawson