html - 覆盖浏览器的自定义默认颜色设置

Question

我想通过考虑使用高对比度模式(或者可能只是暗模式)的用户来使网站更易于访问。
现在我遇到了自定义单选按钮的问题，它们只是具有圆形边框的 HTML 元素:当用户将其浏览器的默认背景颜色设置为黑色时，我的元素的背景颜色也是黑色，使其看起来像一个选中的选项，即使我将此元素的背景颜色设置为白色。
为了防止这种情况，我将白色边框加粗，使其看起来像白色背景。但这也会产生问题，有时在某些缩放级别或分辨率下，我的按钮中间会出现一个小黑点。
有什么办法可以防止浏览器覆盖我在 CSS 中声明的背景颜色？
有什么我错过的东西，比如阻止这种行为的属性？
我也可以替换这些元素或以不同的方式实现它们，但此时我只是好奇是否没有任何简单的解决方案。
我的单选按钮的样式如下所示:

input.check + label:before {
    display: inline-block;
    content: "";
    width: 1rem;
    height: 1rem;
    background: #fefefe;
    border: 0.2rem solid #fefefe;
    border-radius: 50%;
    position: absolute;
    left: -1rem;
}

input.check:checked + label:before {
    background: #000000;
}

Here is a link to a picture of my radio when checked / or default black background-color
我通过将背景颜色设置为黑色来使我的单选按钮“选中”外观 - 就像浏览器在这种情况下所做的那样。
编辑
到目前为止，对于提高自定义单选按钮的可访问性有很好的答案。
更具体地说明我的问题:
我使用以下颜色设置在 Firefox 中测试了页面

但是，无论您为每个元素指定什么，这似乎都会覆盖每个背景颜色。有没有办法对这种覆盖进行异常(exception)处理？

Answer 1

使用伪元素 - 这已经在问题中提出 - 可以完全按照您的意愿设置按钮样式。
此代码段与问题中的 CSS 的主要区别在于，我们将实际输入元素设置为不透明度 0。这意味着出于可访问性目的，它仍然“存在”，但实际上无法看到。
此外，使用径向渐变为按钮着色，我们可以使用不同颜色的环，或者仅使用最适合所选背景的一种颜色。正如问题中的代码所做的那样，我们还根据 rem 调整所有内容的大小，以便为此更改浏览器设置的用户受益。

body {
  background-color: black;
}

input {
  opacity: 0;/* keep the input element in the DOM for accessibility it's just not seen*/ 
}

/* a pseudo element - this is what the user actually sees and we can style it */

label > input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.2rem;
  border-color: white;
  background: radial-gradient(white 0%, white 100%);/* choose what you want - one color or rings */
  border-color: white;
}

label > input[type="radio"]:checked + *::before {
  background: radial-gradient(red 0%, red 50%, white 50%, white 100%);/* choose what you want here too */
  border-color: red;
}

label {
  font-size: 2rem;
  color: white;
}

  <label>
    <input type="radio" name="mybutton" value="A" checked />
    <span>A</span>
  </label>
  <label>
    <input type="radio" name="mybutton" value="B" />
    <span>B</span>
  </label>
  <label>
    <input type="radio" name="mybutton" value="C" />
    <span>C</span>
  </label>