html - 是否可以防止 HTML 元素的不透明度影响 TAB 助手的不透明度？

（我在标题中写了“标签助手”，我猜这是一个发明的术语。请纠正我。）

在下面的片段中有两个复选框，其中一个的不透明度降低到 20%。

.checkbox1 {
  opacity: 100%;
}
.checkbox2 {
  opacity: 20%;
}

<div class="checkbox1">
  <input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
  <input type="checkbox" id="myCheck2">
</div>

如果我选择第二个，我会看到这个（嗯，不是蓝色的东西）：

无论如何，即使元素的不透明度通过 CSS 设置为 100% 以外的值，是否仍然让黄色的东西保持 100% 的不透明度？

我想这可能完全取决于浏览器，但我真的不确定。

标签： htmlcssbrowseraccessibilityopacity

黄色的笔划是众所周知的，因为它是特定于浏览器的，所以它很难outline设计。浏览器可以并且经常忽略用户定义的样式。

作为元素的一部分，它受元素opacity属性值的影响。这意味着您不能opacity直接设置它。

如果你想让元素半透明而不影响，你应该用颜色设置outline元素的其他部分，这样你就可以设置每个部分的透明度。RGBA（请参阅：我不想从 CSS 中的父级继承子级不透明度或@Rohit Azad Malik对如何应用不透明度而不影响带有 html/css 的子元素的回答？）。

有多种方法可以设置a （或其他类型）的样式checkboxinput，但它们是特定于浏览器的。