Search code examples
htmlcssreactjstextselection

How can I change text selection/highlight color (usually ::selection) in React?


I'd like to change it from the default blue and can't seem to find anything on this. The usual doesn't work:

::-moz-selection, ::selection {
    background: #AFAFAF;
}

Solution

  • ::-moz-selection and ::selection are browser specific pseudo classes. If one vendor browser(chrome) doesn't understand other vendor browser's prefix, it ignores the rules under that block. So it is recommended to separate browser specific pseudoclasses.

    ::-moz-selection {
      background: #AFAFAF;
    }
    ::-webkit-selection {
      background: #AFAFAF;
    }
    ::selection {
      background: #AFAFAF;
    }
    

    https://jsfiddle.net/nutboltu/hgumjs95/7/