2

我想通过考虑具有高对比度模式（或者可能只是暗模式）的用户来使网站更易于访问。现在我遇到了自定义单选按钮的问题，这些按钮只是具有圆形边框的 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;
}

这是选中/或默认黑色背景色时指向我的收音机图片的链接

我通过将背景颜色设置为黑色来制作单选按钮的“选中”外观 - 就像浏览器在这种情况下所做的那样。

编辑

到目前为止，对于改进自定义单选按钮的可访问性，有很好的答案。对我的问题更具体一点：

我使用以下颜色设置在 Firefox 中测试了该页面 Firefox中的颜色​​设置

但这似乎会覆盖每个背景颜色，无论您为每个元素指定什么。有没有办法让这种覆盖例外？

4

2 回答 2

1

为了删除您需要的单选按钮的默认浏览器样式appearance: none;

您将在此处找到更多相关信息，您可以在此处查看浏览器支持。

从那里，您可以使用该background属性来创建检查效果，您甚至不需要使用::before.

我创建了这个小提琴来演示。

代码如下所示：

:root {
  --background-color: white;
  --text-color: black;
  --fill-color: black;
  --border-color: black;
}

@media (prefers-color-scheme: dark) {
   :root {
    --background-color: black;
    --text-color: white;
    --fill-color: white;
    --border-color: white;
  }
}

body {
  background: var(--background-color);
  color: var(--text-color);
}

div {
  display: flex;
  align-items: center;
}

input[type=radio] {
  appearance: none;
  margin: 0 0.5rem 0 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}

input[type=radio]:checked {
  background: radial-gradient(var(--fill-color) 0%, var(--fill-color) 30%, var(--background-color) 31%);
}
<p>Select an option:</p>

<div>
  <input class="check" type="radio" id="huey" name="duck" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input class="check" type="radio" id="dewey" name="duck" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input class="check" type="radio" id="louie" name="duck" value="louie">
  <label for="louie">Louie</label>
</div>

于 2020-12-14T18:58:33.373 回答
1

使用伪元素 - 已经在问题中提出 - 可以完全按照您的意愿设置按钮的样式。

此代码段与问题中的 CSS 的主要区别在于，我们将实际输入元素设置为不透明度 0。这意味着出于可访问性目的它仍然“存在”，但实际上无法看到。

此外，使用径向渐变为按钮着色，我们可以使用不同颜色的环，或者只使用一种最适合所选背景的颜色。正如问题中的代码所做的那样，我们还根据 rems 调整所有内容，以便为此更改浏览器设置的用户受益。

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>

于 2020-12-14T18:47:08.077 回答