可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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%);}

回答2:

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:

https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

回答3:

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

回答4:

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);
            }
        }
    }
}

回答5:

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;
}

回答6:

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.