Question

当我访问许多网页时，我注意到标准单选按钮在选择时是蓝色的：

据我所知，没有css将单选按钮的外观改为蓝色。但是，当我制作一个非常标准的html页面时，它看起来像这样：

我到底错过了什么？它是一个外部库导致按钮显示蓝色吗？

这是标准的单选按钮代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="radio" name="color">  Grey 
</body>
</html>

我正在使用chrome版本65来检查

Answer 1

这些元素的样式主要由操作系统/浏览器控制，并且覆盖在所有浏览器中都不是通用的。来自MDN：

默认情况下，单选按钮（和复选框）使用操作系统的原始样式设置样式。通过指定appearance: none，您可以完全删除本机样式，并为它们创建自己的样式。

本文的其余部分给出了如何使用appearance: none CSS规则设置无线电元素样式的示例。

Answer 2

我有同样的问题，我从Google找到了这个问题，并解决了这个问题：从M81开始，标准的表单控制元素（例如，）具有焕然一新的外观和感觉，并具有更好的可访问性和更好的平台统一性。此策略将恢复旧的“旧版”表单控制元素，直到M84。

如果此政策设置为True，则“旧版”表单控件元素将用于所有网站。

如果此策略设置为False或未设置，则将在M81，M82和M83中启动表单控件元素。

Chrome 84之后将删除此政策。

来自： https://cloud.google.com/docs/chrome-enterprise/policies/?policy=UseLegacyFormControls

Answer 3

我们使用UiPath进行UI自动化，并在最近的浏览器更新后在Chrome中遇到了同样的问题。似乎Google changed the default CSS在Chrome v83.x plus中提供了这些输入。

如果您想将Chrome浏览器更改回默认的灰色CSS，则可以在chrome：// flags菜单中更改此新设置。我们必须这样做，因为我们依靠一些基于图像的选择器来实现UI自动化。如果Google不强制这样的默认设置，那就太好了。

这是我从上面的链接中使用的答案：

David Boland 5131 6/16/20

如果您必须返回到旧版本（Chrome浏览器v83.x之前的样式），请禁用 chrome：// flags /＃form-controls-refresh（也称为“ Web平台控制更新的用户界面”）。

我不确定页面有什么问题，只是似乎没有什么对。我将不得不为所访问的网站拍照以及日期。对我来说，这是一个内部局域网网关配置我知道不会在CSS中用一些奇怪的蓝色更新页面因为它是一个非常古老的盒子。

它将复选框变回黑色的旧灰色背景复选框，并在所有位置消除该怪异的浅蓝色（它似乎v83的超链接也变得更轻了。

我从reddit线程中找到了标志。谢谢

以下是该设置的屏幕截图：

什么使单选按钮蓝色对灰色

3 个答案: