CSS accent-color在单选按钮上失效：蓝色按钮不生效红色正常

问题出在同一组单选按钮同时设置了checked属性，具体细节如下：

• 单选按钮的原生规则是：同组（未指定name属性时默认属于同一组）的单选按钮仅能有一个处于选中状态。
• 浏览器渲染时会自动修正这个冲突：将最后一个带checked属性的单选按钮设为选中状态，强制取消前面那个的选中状态。
• 未选中的单选按钮，accent-color的视觉表现极弱（和默认未选中样式几乎无差别），看起来像是样式没生效，但实际上蓝色的accent-color是存在的，只是因为按钮未被选中，你看不到对应的高亮效果。

解决方法 #

有两种方式可以验证蓝色样式的有效性：

• 给两个单选按钮设置不同的name属性，让它们分属不同组，这样两个按钮都能保持选中状态，就能看到各自的accent-color效果；
• 只给其中一个设置checked属性，另一个不设置，切换选中状态就能看到对应颜色的高亮。

修改后的示例代码：

<body>
  <p>
    <input type="radio" name="radio-group-1" class="custom-radio-blue" checked /> Click me blue!
  </p>
  <p>
    <input type="radio" name="radio-group-2" class="custom-radio-red" checked /> Click me red!
  </p>
  <style>
    .custom-radio-blue {
      accent-color: #01adef;
    }
    
    .custom-radio-red {
      accent-color: red;
    }
  </style>
</body>

内容的提问来源于stack exchange，提问作者Yogesh