html - 是什么让单选按钮变成蓝色和灰色

标签 html css

当我访问许多网页时,我注意到标准单选按钮在选择时是蓝色的,如下所示:

Blue radio

据我所知,没有 CSS 将单选按钮的外观更改为蓝色。然而,当我制作一个非常标准的 html 页面时,它看起来像这样:

Grey Radio button

我到底错过了什么?是否是外部库导致按钮显示蓝色?

这是标准单选按钮代码:

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

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

最佳答案

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

By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them.

本文的其余部分提供了如何使用 appearance: none CSS 规则设置单选元素样式的示例。

关于html - 是什么让单选按钮变成蓝色和灰色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50029518/

相关文章:

javascript - SVG 矩形未显示在 Firefox 中,但适用于 Chrome

html - 如何使用 css/bootstrap 将圆圈定位在一个圆圈中?

html - 如何水平滚动元素溢出 : hidden on mobile device

HTML-CSS a href 文本对齐 左半右

javascript - 如何在包含内容的新选项卡中打开自定义 URL?

html - 将 Favicon 插入到 html 表单中

css - CSS 自定义属性是否可以包含多个要引用的值?

java - 使用小程序减少 HTML

html - 为什么 chrome 自动填充不能填充大多数字段

html - 无法在 Google Chrome 中呈现 MathML 内容