Question 188855 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    Your issue pertains to the selection/highlighting of text in your browser, which can be manipulated in CSS via the ::selection pseudo-element.

    This can be found in the Chrome DevTools, as shown in the image below (the selection is in orange):

    enter image description here

    For more information on how to utilize and manipulate this pseudo-element, you can refer to the documentation on the Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

    I hope this helps resolve your issue!

    Login or Signup to reply.
  2. 0

    Found this in the theme you’re 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:

    /* Selected elements */

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

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

    to your desired color

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search