CSS: How do you inspect the settings for text you are highlighting/selecting with your mouse or keyboard?

Question

I'd like to inspect the mouse/keyboard text highlighting/selection in my browser, but don't know how to inspect it. I need to inspect it so I can change it. I'm working on my website using this theme (https://github.com/mmistakes/minimal-mistakes) as the baseline, and the text highlighting is currently black, as you can see here:

So, how do I inspect and change this property in my CSS?

I've greped my repo for cursor, mouse, user-select.

I've googled a lot and can't seem to find out what property I should be changing.

I've asked here too: https://github.com/mmistakes/minimal-mistakes/discussions/4392

Answer 1

I found this in the theme you were using:

::selection {
  color: #fff;
  background: #000;
}

The file name is here:

https://github.com/mmistakes/minimal-mistakes/blob/8a67ce8e41ec850f2d7c373aa47739b2abfee6f1/_sass/minimal-mistakes/_reset.scss#L40

You can override this by setting this CSS content:

/* Selected elements */

::-moz-selection {
  color: #fff;
  background: #000;
}

::selection {
  color: #fff;
  background: #000;
}

to your desired color.