随着new Chrome update Chrome 显示改进的默认表单样式。 根据帖子，我会说应该可以更改此表单主题以匹配网站的颜色集。
我们追求美丽、网状和中性。我们希望每个设计系统都能在新设计中看到自己的一面，并轻松想象它们如何适应自己的品牌。
在过去的几个小时里，我一直在搜索并试图摆脱与我网站的其他部分形成鲜明对比的默认蓝色。除了使用 '-webkit-appearance: none;'并自己重新设计复选框之类的东西我不确定是否可能。
是否有人也遇到过这个问题，或者有我缺少的解决方案或文档？
【问题讨论】：
标签： css forms google-chrome checkbox
我首选的解决方案只使用 css。它针对 Safari 和 Chrome，但无论如何它已经是灰度的，所以没关系。
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}
【讨论】：
这是 Chrome 83 及以上版本 - 其他浏览器做其他事情（主要是灰度）。
这个结构现在似乎可以工作 - 只要为 "body" 设置了背景颜色：
input[type=checkbox] {
mix-blend-mode: luminosity;
}
示例：
虽然我不确定这是否会继续有效，但作为一种临时解决方法可能足以减轻“设计师的痛苦”。被打乱的配色方案是一场危机:-)。
<!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>
链接：
【讨论】：
纯 CSS 解决方案，允许任何颜色，同时尽量接近新设计。只需替换 --primary-color 变量。适用于 Chromium 浏览器（Chrome、新 Edge）和 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>【讨论】：
使用 hue-rotate() 过滤器，可以改变选中复选框的背景颜色。例如，这个 css 使它变成绿色：
输入[type=checkbox]:checked{filter:hue-rotate(290deg);}
现在，通过添加灰度，可以使绿色更深：
输入[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}
brightness() 过滤器还可以帮助调整颜色。
使用invert()，你可以得到一个黑色的复选框，然后添加灰度和亮度以获得白色背景（看起来像一个普通的复选框，只是没有边框）：
输入[type=checkbox]:checked{filter:invert() 灰度(100%) 亮度(180%);}
【讨论】：
它太丑了，不能只更新复选框的样式:(所以你需要真正隐藏原生复选框并使用:before插入你的自定义元素
这是使用 Font Awesome 的 sn-p（复选标记的免费图标 \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这是一个纯 Unicode 的（仍然需要一些抛光以避免跳跃）
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【讨论】：
我的解决方案是恢复灰色/黑色复选框，仅针对桌面版本的 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);
}
}
}
}
【讨论】：
这种从 Chrome 81 到 Chrome 83 的小部件外观变化确实严重影响了我在 p5.js 中的 Gui。我找到了一种恢复 Chrome 81 风格的方法，我不知道它还能保持多久。把它放在你的 Chrome 地址栏中..
chrome://flags/#form-controls-refresh
它带来了一堆内部选项.. 设置 Web 平台控件更新 UI 即。你登陆的那个，禁用。然后必须重新启动浏览器。这消除了所有“改进”，包括上面提到的可怕的亮蓝色滑块。
感谢 Reddit 发帖者提供的信息，我丢失了该信息的 URL。 （我的环境：Mac、Mojave 10.14.6、Chrome 83.0.4103.106）。 （现在也是 83.0.4103.116，最迟 2020 年 6 月 25 日）。
Ciao e Buona Fortuna。
【讨论】：
在Chrome 91中，也许你可以试试accent-color CSS 关键字，它允许Web 开发人员为元素生成的UI 控件（例如复选框、单选按钮）指定强调色。
accent-color CSS 属性目前是实验性的。请开启chrome://flags/#enable-experimental-web-platform-features进行测试。
<!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>
【讨论】：
我以为我需要使用-webkit-appearance: none;，但事实证明没有必要。此外，无需使用 JavaScript 和/或filter。
【讨论】：
用途：
input[type="checkbox"] {
-webkit-appearance: none;
}
然后按照你想要的方式设置它。
对于选中状态，您可以使用 :before 伪元素，带有字体图标（如 Fontawesome）或图像：
input[type="checkbox"]:checked:before {
content: '';
width: 14px;
height: 14px;
position: absolute;
background: url(check.png) no-repeat center 3px transparent #ff0000;
}
【讨论】：
-webkit-appearance: none; 只是为我隐藏它。有一个不是随机的“你想要的风格”的例子，而是“这里的风格接近以前的版本”（不需要一些疯狂的图像或依赖项）