Question

0

721

Views

Chrome 83: Change colors of new form styling

With the new Chrome update Chrome is displaying improved default form styling. According to the post I would say it should be possible to change this form theme to match the color set of a website.

We were going for beautiful, webby, and neutral. We hope that every design system would see a bit of themselves in the new designs and easily imagine how they might be adapted for their own branding.

I have spend the last few hours searching and trying to get rid of the default blue color that has a very bad contrast with rest of my website. Aside from using '-webkit-appearance: none;' and restyling things like checkboxes myself I'm not sure if it's possible.

Does anyone experience this issue as well or have a solution or documentation I'm missing?

over 4 years ago · Santiago Trujillo

10 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-03-08T19:29:22.689Z

Use:

input[type="checkbox"] {
    -webkit-appearance: none;
}

Then just style it the way you want.

As for the checked state you can use :before pseudo element with font icon like Fontawesome or with an image like so:

input[type="checkbox"]:checked:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    background: url(check.png) no-repeat center 3px transparent #ff0000;
}

Answer 2 · 2022-03-08T19:29:22.907Z

It's so ugly one cannot just update the style of checkboxes :( So you need to really hide native checkbox and insert your custom element using :before

Here is the snippet using Font Awesome (free icon for checkmark \f00c)

input[type="checkbox"] {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "\f0c8";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "\f00c";
  color: black;
}

<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked

And here is the one with pure Unicode (which still requires some polishing to avoid jumping)

input[type="checkbox"] {
  /* Show the border to simulate the square */
  border: 1px solid #ccc;
  /* Hide the native checkbox */
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
}

input[type="checkbox"]:before {
  /* Show some fake element to keep the space for empty "square" */
  content: "w";
  color: transparent;
}

input[type="checkbox"]:checked:before {
  /* Show actual checkmark */
  content: "✓";
  color: black;
}

<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked

Answer 3 · 2022-03-08T19:29:23.224Z

My solution to bring back the grey/black checkboxes, targeting only desktop versions of Chrome >= 83.

if (window.chrome) {
    var ua = navigator.appVersion;
    if (ua.indexOf('Mobile') === -1) {
        var flag = ua.indexOf('Chrome/');
        if (flag !== -1) {
            var version = parseInt(ua.substr(flag + 7, 2));
            if (version >= 83) {
                var chromeStyle       = document.createElement('style');
                chromeStyle.type      = 'text/css';
                chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
                document.head.appendChild(chromeStyle);
            }
        }
    }
}

Answer 4 · 2022-03-08T19:29:23.503Z

My preferred solution just uses css. It targets Safari as well as Chrome, but it's already grayscale anyway, so that's OK.

input[type='checkbox']:checked {-webkit-filter: grayscale(100%);} input[type='radio']:checked {-webkit-filter: grayscale(100%);}

Answer 5 · 2022-03-08T19:29:23.785Z

This is Chrome 83 upwards specific - other browsers do other things (grayscale mostly).

This construct seems to work for now - just as long as there is a background color set for "body":

input[type=checkbox] {
    mix-blend-mode: luminosity;
}

Examples:

Though I am not sure this will continue to work, it might be good enough as a temporary workaround to alleviate "designer suffering". Disrupted color schemes is a crisis :-).

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Test</title>

  <style>
    body {
      background-color: white;
    }  
    input[type=checkbox] {
          mix-blend-mode: luminosity;
    }
  </style>

</head>

<body>
 <label><input type="checkbox" checked>Test</label>
</body>

</html>

Links:

Answer 6 · 2022-03-08T19:29:24.158Z

I thought I was going to need to use -webkit-appearance: none;, but turns out it is not necessary. Also, using JavaScript and/or filter is unnecessary.

Here is where I landed: https://codepen.io/colorful-tones/pen/NWxZpBb

Answer 7 · 2022-03-08T19:29:24.390Z

This change in widget appearance from Chrome 81 to Chrome 83 really badly affected my Gui, in p5.js. I found a way to revert to Chrome 81 style, I don't know how long it will remain available. Put this in your Chrome address bar ..

chrome://flags/#form-controls-refresh

It brings up a bunch of internal options .. set the Web Platform Controls updated UI ie. the one you land on, to Disabled. Have to then restart the browser. This gets rid of all the "improvements", including the awful bright blue slider mentioned above.

Thanks to a Reddit poster for the info, which I've lost the URL of. (My environment: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Also now 83.0.4103.116, latest at 25 June 2020).

Ciao e Buona Fortuna.

Answer 8 · 2022-03-08T19:29:24.710Z

Pure CSS solution which allows any color while trying to stay close to the new design. Just replace the --primary-color variable. Works in Chromium browsers (Chrome, new Edge) and Firefox.

:root {
  --primary-color: #f44336;
}

input[type="checkbox"] {
  height: 14px;
  width: 14px;
  position: relative;
    -webkit-appearance: none;
}

input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #767676;
  background-color: #fff;
}

input[type="checkbox"]:hover::before {
  border: 1px solid #4f4f4f;
}

input[type="checkbox"]:checked:hover::before {
  filter: brightness(90%);
}

input[type="checkbox"]:checked:disabled:hover::before {
  filter: none;
}

input[type="checkbox"]:checked:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}

input[type="checkbox"]:checked:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 2px;
  box-sizing: border-box;
  height: 5px;
  width: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: translateY(-1.5px) rotate(-45deg);
  transform: translateY(-1.5px) rotate(-45deg);
}

input[type="checkbox"]:disabled::before {
  border: 1px solid #c9ced1;
  border-radius: 2px;
  background-color: #f0f4f8;
}

input[type="checkbox"]:checked:disabled::before {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  background-color: #d1d1d1;
}

<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>

Answer 9 · 2022-03-08T19:29:24.988Z

Using hue-rotate() filter, one can change the background color of checked checkboxes. For example, this css makes it green:

Input[type=checkbox]:checked{filter:hue-rotate(290deg);}

Now, by adding grayscale, one can make the green color darker:

Input[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}

The brightness() filter can also help to adjust the color.

Using invert(), you can get a black checkbox, then add grayscale and brightness to get white background (which looks like a regular checkbox, only, without a border):

Input[type=checkbox]:checked{filter:invert() grayscale(100%) brightness(180%);}

Answer 10 · 2022-03-08T19:29:25.359Z

In Chrome 91, maybe you can try the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.

The accent-color CSS property is currently experimental. Please enable chrome://flags/#enable-experimental-web-platform-features to test it.


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
      </head>
      <style>
        input[type="checkbox"] {
          accent-color: red;
        }
      </style>
      <body>
        <input type="checkbox" />
      </body>
    </html>

0

721

Chrome 83: Change colors of new form styling

10 answers

0

0

0

0

0

0

0

0

0

0

Find remote jobs

Andres GPT