Resolve issue where input text is hard to read in dark theme

[parthea]

Fixes #1008

[yebrahim]

Curious why this is different from the ::seletion rule

[parthea]

That's an excellent question! I noticed that the color of the selected text in the input field differs in Chrome and Firefox when using background: #ccc;. In Firefox, the selected text was not easy to read with background: #ccc; , so I used background: #999; instead. Thinking about this a bit more, I agree that these should not differ. I'll see if I can figure out the root cause so that we can keep the selected text colors the same.

Firefox with background: #ccc;

Chrome with background: #ccc;

Firefox with background: #999;

[parthea]

I've pushed a new version using rgba() based on this StackOverflow post.

::selection is not in the official CSS spec, but it was published in a draft of Pseudo-Elements Level 4.

From Mozilla Developer Network,

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them.

[yebrahim]

Awesome! Thanks for the investigation and fix. It would actually be great if we can merge the two CSS rules into one that takes both selectors. :)

[parthea]

It would actually be great if we can merge the two CSS rules into one that takes both selectors.

Unfortunately, the following didn't work in my testing.

input.raw_input::selection, input.raw_input::-moz-selection {
  background: rgba(85, 85, 85, 0.99);
}

The following snippet from Mozilla Developer Network also reaffirms the test result:

Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written..

[yebrahim]

Oh CSS! Well thanks Anthonios.

[ojarjur]

Sorry for the delay getting this merged; for some reason it seems that GitHub never triggered the webhook to trigger the automated checks, so the required commit statuses never got set.