0

In most browsers the actual displayed background color doesn't match the configured background color.

In the example below the configured background color is black (#000000). In Internet Explorer and Firefox the displayed background color is really black (#000000), what's perfect. However, in Google Chrome, Microsoft Edge, Opera and Safari the displayed background color is '#333333'. In Safari the background color of the selected 'Input Text' is even blue.

Is there really no way to force all browsers to display exactly the configured background color?

Note: The text color is displayed correctly in all browsers.

And here's my code:

<html>
  <head>
    <style type = "text/css">
      ::selection {
        color:            #ffffff;
        background-color: #000000;
      }
      ::-moz-selection {
        color:            #ffffff;
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    Normal Text<p>
    <input type = "text" value = "Input Text">
  </body>
</html>

Here's a new code snippet where my "problem" is more visible:

<html>
  <head>
    <style type = "text/css">
      ::selection {
        color:            #000000;
        background-color: #ffffff;
      }
      ::-moz-selection {
        color:            #000000;
        background-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <input type = "text" style = "color: #ffffff; background-color: #000000" value = "Input Text">
  </body>
</html>

If the background is black, it's more obvious that the selection color is gray (#989898) instead of white (#ffffff) as coded.

How can I force Google Chrome, Microsoft Edge, Opera and Safari to display the selection in white instead of gray?

Seeky
  • 78
  • 1
  • 9
  • What background color? – luek baja Jun 23 '20 at 02:41
  • According to CaniUse(https://caniuse.com/#feat=css-selection) the above code works in almost 84% of the browsers except Safari, So you don't have to worry much. – Ujjawal Poonia Jun 23 '20 at 13:18
  • "What background color?": I mean the displayed color when you select the text with the mouse. – Seeky Jun 23 '20 at 18:14
  • "The above code works in almost 84% of browsers": Yes, the code works, but the displayed color is not exactly the one I've configured. I've configured white (#ffffff) and the displayed color is gray (#989898). Only Internet Explorer and Firefox display the selection in white. – Seeky Jun 23 '20 at 18:18
  • 1
    I had the same problem and just found the answer here: https://stackoverflow.com/questions/14970891/css-selection-color-behaving-strangely-on-chrome – user13814244 Jun 25 '20 at 17:02
  • Wow, this is absolutely great! I've already given up trying to find a solution, but you're right, ```background-color: rgba(255, 255, 255, 0.995)``` really solves the problem. Many many thanks! – Seeky Jun 25 '20 at 23:22
  • This solves the problem for all browsers, but not for Safari. But I'm afraid that there's definitely no solution for Safari. Or is there? – Seeky Jun 25 '20 at 23:23
  • Is it correct that there's no way to change the color of the selected text (text and background) in Safari? Currently a selected text is always white and the background is always blue. A clarifying answer would end my search. Many thanks. – Seeky Jun 28 '20 at 17:58

0 Answers0