CSS selection style removes other styles

Question

I'm working on a text editor with a custom spell checker. It adds a css class around misspelled words to show a red zigzag under the word.

I also use a class to style selections in the editor with a custom background color.

.spell-error {
  background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw=="); 
  background-position: bottom; 
  background-repeat: repeat-x;
}

::selection {
  background-color: #99def7;
}
::-moz-selection {
  background-color: #99def7;
}

<p>There is a <span class="spell-error">misstake</span> in this sentence</p>

question from:https://stackoverflow.com/questions/65942842/css-selection-style-removes-other-styles

Answer 1

The background-image will have a white background which overlays the background colour.
You need to have a specific background-image for the .spell-error::selection, which has the correct background colour in the actual image.