1

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: #499299;
  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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
Tajwar
  • 13
  • 2
  • I does, the problem is that the two colors are very similar: https://jsfiddle.net/x9q3ecgn/ Not sure what Chrome is actually doing here. – Kaiido Jan 16 '20 at 04:57
  • 1
    Does this answer your question? [CSS3 ::selection behaves differently in FF & Chrome](https://stackoverflow.com/questions/7224445/css3-selection-behaves-differently-in-ff-chrome) – Kaiido Jan 16 '20 at 05:04

1 Answers1

0

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>
chris
  • 789
  • 4
  • 16