Search code examples
csspseudo-element

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

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:

enter image description 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

Solution

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