I changed the text highlight color using <code>::selection</code>, which works pretty in my page. However, I found the Chrome behaves different from FF, which highlight the <code> </code> with default blue color instead of the color I set for all the elements. FF doesn't hightlight the <code> </code> so it works fine. I tried to override the <code>::selection</code> for <code> </code>, doesn't work; Tried to use <code>user-select:none;</code>, doesn't work either; Tried <code>display:none;</code>, which simply made my <code> </code> all disappeared... Any idea?

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 <code> </code> with <code></code>. Something like this: <pre class="prettyprint"><code><!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> Hello Normal How are you? Hello Mozilla How are you? Hello Webkit How are you? </body> </html> </code></pre> 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 <code> </code> to be non selectable in css like so. <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>br { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code>Run the snippet to see for yourself. See?</code></pre> </div> </div>

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

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   with default blue color instead of the color I set for all the elements. FF doesn't hightlight the   so it works fine.

I tried to override the ::selection for  , doesn't work; Tried to use user-select:none;, doesn't work either; Tried display:none;, which simply made my   all disappeared...

Any idea?

How do you stop highlighting text when clicking in CSS?

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.

How do I remove highlight color in CSS?

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.

How do I remove highlight from a text box?

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

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

Tags:

html

css

Dante Y

People also ask

2 Answers

Galled

Ryan Buech

Recent Activity

Donate For Us