Chrome 83: Change colors of new form styling

2020-07-02 10:38发布

站内问答 / HTML/CSS
951 6 6

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?

6条回答
爷、活的狠高调
2楼-- · 2020-07-02 11:03

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;
}
查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2020-07-02 11:14

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

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
4楼-- · 2020-07-02 11:16

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.

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
5楼-- · 2020-07-02 11:22

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:

Check boxes

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:

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
6楼-- · 2020-07-02 11:25

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

查看更多
0人赞 添加讨论(0) 举报
一夜七次
7楼-- · 2020-07-02 11:28

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);
            }
        }
    }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)