Remove only text-shadow from selected text with just CSS

Question

I styled some text to have a faint white text-shadow so that when it passes on a same-color background, it's style legible. The issue comes in that when I select the text, it becomes difficult to read thanks to the text-shadow being the same color as the text.

body {
  background-color: #CCC;
  margin: 0px;
}

div {
  padding: 1.5em;
}

div + div {
  margin: 2em 0 0;
}

div p:last-child {
  margin: 0em;
}

p {
  text-shadow: 0 0 3px #FFF;
  margin: 0 0 1em;
}

.actual-effect ::selection {
  text-shadow: none;
}

.intended-effect p {
  text-shadow: none;
}

<div class="actual-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>

<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>

<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>

<div class="intended-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>

<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>

<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>

I'm not sure how other browsers render this, but currently in Firefox it accurately removes the text-shadow, but it loses all of the default stylings it would have had had I not changed it (ie. white text, blue background, inverted colors when juxtaposed against a certain backgrounds, etc).

Is there a way to modify ::selection without losing all of the default values? I'd rather not re-add all of the default styles unless that were the only option available.

Answer 1

The issue isn't avoiding that the text-shadow makes things difficult to read, it's more-so trying to avoid p::selection from losing everything else.

Sorry for previous answer ??. You can set the text-shadow to 0 0 0.

Example :

body {
  background-color: #CCC;
  margin: 0px;
  padding: 1.5em;
}

p {
  text-shadow: 0 0 3px #FFF;
  margin: 0 0 1em;
}

::selection {
  text-shadow: 0 0 0 !important;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>

<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>

<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>

Previous Answer (unsatisfactory)

It's because background, change that. I'm try use background-color: transparent, but it's not work. So, in this code i use background-color: #fff.

p {
  text-shadow: 2px 2px #FF0000;
}

p::selection {
  background-color: #fff;
  text-shadow: none;
}

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem numquam, laboriosam distinctio impedit qui explicabo corporis optio commodi officiis ratione voluptates corrupti, temporibus iusto recusandae facilis nobis obcaecati nisi quisquam iste ullam excepturi iure. Ratione, molestiae mollitia vitae, error soluta illum ex accusamus voluptatem tempora hic aut rerum! Recusandae impedit consectetur consequatur dolorum, dolore aut officiis nam tenetur aliquid repudiandae natus velit sapiente vero esse, dolor quasi illo at consequuntur aperiam explicabo iusto corporis ex fugit architecto? Placeat, unde suscipit expedita enim ab vel iste cumque quas, asperiores adipisci accusamus? Et, minus. Saepe magni quo, ipsam enim earum placeat voluptates.</p>