Почему Firefox не меняет цвет и цвет фона, когда текст выделен так, как и предполагалось? Хорошо работает на Chrome - PullRequest
Новая
       13

Почему Firefox не меняет цвет и цвет фона, когда текст выделен так, как и предполагалось? Хорошо работает на Chrome

1 голос
/ 16 января 2020 

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>

1 Ответ

0 голосов
/ 16 января 2020

Хорошо, хорошая новость в том, что это технически работает. Если вы посмотрите очень близко , вы можете увидеть это, но оно настолько слабое, что его почти невозможно обнаружить.

Firefox не отображает фон выделения так же, как в Chrome, и похоже, что возникли проблемы с фоновым цветом ::-moz-selection, очень похожим на цвет фона раздел.

Решение : примените к ::-moz-selection другой цвет, чем с общим ::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;
}

Вот полный рабочий код: 

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