Css3 ::Selection Behaves Differently in Ff & Chrome

CSS3 ::selection behaves differently in FF & Chrome

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: http://jsfiddle.net/tw16/m8End/

p::-moz-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::-webkit-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}

CSS selection color behaving strangely on Chrome

Possibly to prevent exactly what you are trying to do, it seems like Chrome will change the opacity of the background color of the selection if it's 1. You can cheat this by setting the opacity very close to 1 like (background-color: rgba(0,0,0,.99).

http://jsfiddle.net/ExplosionPIlls/a3gfR/5/

CSS is behaving differently on Firefox (version 96 and older) than it is on Chrome

In v96 ::before and ::after are not being considered in the flex layout on the label.

We can achieve the same results without the flax layout:

.outter-wrapper {
  width: 200px;
  border: 1px solid black;
}

.wrapper {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 8px 24px 8px 0px;
  width: 100%;
}

.input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.label-wrapper {
  line-height: 1.5rem;
  position: absolute;
  left: 10px;
}

.label {
  position: relative;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 12px;
  flex: 1;
}

.label::before {
  position: absolute;
  right: 0;
  display: block;
  min-width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 1px solid black;
  border-radius: 4px;
}

.label::after {
  position: absolute;
  right: 0;
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

input[type="checkbox"]:checked~.label::after {
  background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
  width: 20px;
  height: 20px;
  top: 0;
}

<div class="outter-wrapper">
  <div class="wrapper">
    <input class="input" name="checkbox2" id="checkbox2" type="checkbox">
    <label class="label" for="checkbox2">
        <div class="label-wrapper">
          Only works in Chrome
        </div>
      </label>
  </div>
</div>

CSS Left and Top behaves differently in chrome, firefox and IE

Please see question: Using Position Relative/Absolute within a TD?

Basically it is because the position: relative has undefined behavior on table-cell elements (td or anything display: table-cell), meaning that each browse implements it as it wants, there are no rules.

Therefore in somecases it might work (see chrome), but not in others.

Tackled the same problem myself. And ended up using divs, because I really needed sub elements positioned relatively to the container, outside of it.

If you only need to center the content please use vertical-align: middle instead of the position: absolute - top: 50% - margin-top: -somepx combo

See edited fiddle

::selection background-color and color rendering in browsers

According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).

As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using

background:rgba(255, 255, 255, 0.99);

For more details, checkout the linked answer by tw16

Furthermore, this works for me on FF:

::selection { /* stuff */ }
::-moz-selection { /* stuff */}

But this does not:

::selection, ::-moz-selection { /* stuff */ }

But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.

Why am I getting different colors in different browsers using the same hexadecimal value?

I can reproduce it in Chrome. It looks like it is because the selection is not completely opaque. If you set a background picture, you can see it shine through. This also means that the blue background color shines through, affecting the overall color of the selection.

I cannot (yet) find what exactly causes this and how to change it. Opacity doesn't work. The color is normal rgb... Anyway, proof of the cause can be seen here.

::selection {  background: #f997f1;}
::-webkit-selection {  background: #f997f1;}
::-moz-selection {  background: #f997f1;}
body {  background: lightblue;  background-image: url(https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)}
p {  font-family: sans-serif;  font-size: 2em;  color: #f997f1;}

<p>Some text to select</p>

Why does the CSS3 pseudo ::selection not change the color for all parts?

The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:

https://bugs.webkit.org/show_bug.cgi?id=38943

The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.

Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/

And a post I wrote about it: https://stackoverflow.com/a/8529323/918414

CSS3 ::selection selector not working properly on anchor tags

Note that per MDN

Only a small subset of CSS properties can be used in a rule using
::selection in its selector: color, background, background-color and
text-shadow. Note that, in particular, background-image is ignored,
like any other property.

The line on your link is part of text-decoration which is not taken into consideration by the pseudo selector. Your best bet would perhaps be to remove it using

a{
 text-decoration:none;
}

You may want to also note:

Though this pseudo-element was in drafts of CSS Selectors Level 3, it
was removed during the Candidate Recommendation phase (link)

The ::selection pseudo-element currently isn't in any CSS module on
the standard track. It should not be used in production environments.

Further information

::selection working only after forced re-render in inpector using - Chrome + ReactJs

Opened a bug for Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=685174#c6

The workaround for me is as stated -
"For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint."

Why Firefox is not changing the color and background color when the text is selected like it it supposed to? It works well on Chrome

Well the good news is that it is technically working. If you look extremely close, you can actually see it, but it's so faint that it's almost undetectable.

Firefox doesn't appear to be rendering the selection background the same as in Chrome, and looks like it's having trouble with the ::-moz-selection background-color being so similar to the background-color of the section.

Solution: apply a different color to the ::-moz-selection than with the general ::selection:

main section::selection {
  color: inherit;
  background-color: #499299; /* Original color for Chrome */
  cursor: text;
}

main section::-moz-selection {
  color: inherit;
  background-color: #297279; /* Adjusted color for Firefox */
  cursor: text;
}

Here is the full working code:

main section {  cursor: default;  background-color: #479097;  border: 1px solid #000;  padding: 2px;  margin: 15px 5px 15px 5px;  font-size: 20px;  text-shadow: 1px -1px 0 #000;}
main section::selection {  color: inherit;  background-color: #499299;  cursor: text;}
main section::-moz-selection {  color: inherit;  background-color: #297279;  cursor: text;}

<main>  Contents:  <section id="1">    <span class="sectionNum">1</span> If you clicked on 1 then you came here. Lorem ipsum dolor sit amet doloremque.  </section>  <section id="2">    <span class="sectionNum">2</span> If you clicked on 2 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, anim id est laborum.  </section>  <section id="3">    <span class="sectionNum">3</span> If you clicked on 3 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing est laborum.  </section></main>

Css3 ::Selection Behaves Differently in Ff & Chrome