在语义上 'correct' 使用 CSS :checked 属性 设置标签样式的方法
Semantically 'correct' method of styling a label using the CSS :checked property
正在处理具有一些自定义单选按钮样式的表单，想检查一下我通常这样做的方式。
为了避免 Javascript，我通常将一个无线电输入包裹在一个标签内，并在输入后加上一个 div。然后我根据选中的状态设置 div 的样式。
这是一些示例标记：
label input:checked ~ span {
background: red;
}
<label for="10000">
<input type="radio" id="10000" name="coveramount" value="10000">
<span>£10,000</span>
</label>
（元素上通常有类）
标签内的跨度是否正确？有没有更好的方法来使用另一个标签或类似的可访问性？
参考： After Pseudo Element
使用::after或::beforepseudo-elements，并相应地调整内容。
label input:after {
content: '10,000';
font-size: 20px;
height: 1em;
position: relative;
left: 20px;
}
label input:checked::after {
background-color: red;
}
<label for="10000">
<input type="radio" id="10000" name="coveramount" value="10000">
</label>
更新：
- 这不是一个好的和适当的解决方案，因为在输入元素上使用伪元素不会在 Firefox 或 Edge 中呈现任何内容
你问题中的HTML没问题。这是一种非常简单可靠的样式单选框和复选框元素的方法。
有一些潜在的可访问性问题需要注意，更多的是 CSS 而不是 HTML。
<input> 元素本身在您的设计中是否可见？通常隐藏实际的 radio/checkbox 输入，并使用 CSS 背景图像来提供选中和未选中状态的精美版本。如果您这样做，请记住：
- 为有视力的键盘用户提供焦点样式，使用类似
label input:focus ~ span 的东西
- 避免使用
display:none、visibility:hidden 或 HTML hidden 属性来隐藏真正的 radio/checkbox。这些都会阻止纯键盘用户和屏幕 reader 用户（指针用户可以单击 <label> 元素）进行输入。那是因为它们都会导致输入从键盘 Tab 键顺序中删除，并从发送给辅助技术的辅助功能树中删除。如果您需要隐藏真正的输入元素，请使用类似 Bootstrap 的 .sr-only class 或 HTML5Boilerplate 的 .visuallyhidden class 的方法。有关此的更多详细信息，请参阅：
另一个潜在的问题是颜色的使用。不要仅仅依靠颜色的变化来指示选中的控件，那是 WCAG 的失败。本机收音机和复选框涉及形状变化（即填充圆圈的子弹）。请注意，当使用 Windows 高对比度主题时，CSS 颜色会被覆盖。如果 background: red 是唯一 选中（或聚焦）单选选项的线索，Windows 高对比度用户将不知道发生了什么。
正在处理具有一些自定义单选按钮样式的表单，想检查一下我通常这样做的方式。
为了避免 Javascript，我通常将一个无线电输入包裹在一个标签内，并在输入后加上一个 div。然后我根据选中的状态设置 div 的样式。
这是一些示例标记：
label input:checked ~ span {
background: red;
}
<label for="10000">
<input type="radio" id="10000" name="coveramount" value="10000">
<span>£10,000</span>
</label>
（元素上通常有类）
标签内的跨度是否正确？有没有更好的方法来使用另一个标签或类似的可访问性？
参考： After Pseudo Element
使用::after或::beforepseudo-elements，并相应地调整内容。
label input:after {
content: '10,000';
font-size: 20px;
height: 1em;
position: relative;
left: 20px;
}
label input:checked::after {
background-color: red;
}
<label for="10000">
<input type="radio" id="10000" name="coveramount" value="10000">
</label>
更新：
- 这不是一个好的和适当的解决方案，因为在输入元素上使用伪元素不会在 Firefox 或 Edge 中呈现任何内容
你问题中的HTML没问题。这是一种非常简单可靠的样式单选框和复选框元素的方法。
有一些潜在的可访问性问题需要注意，更多的是 CSS 而不是 HTML。
<input> 元素本身在您的设计中是否可见？通常隐藏实际的 radio/checkbox 输入，并使用 CSS 背景图像来提供选中和未选中状态的精美版本。如果您这样做，请记住：
- 为有视力的键盘用户提供焦点样式，使用类似
label input:focus ~ span 的东西
- 避免使用
display:none、visibility:hidden或 HTMLhidden属性来隐藏真正的 radio/checkbox。这些都会阻止纯键盘用户和屏幕 reader 用户（指针用户可以单击<label>元素）进行输入。那是因为它们都会导致输入从键盘 Tab 键顺序中删除，并从发送给辅助技术的辅助功能树中删除。如果您需要隐藏真正的输入元素，请使用类似 Bootstrap 的.sr-onlyclass 或 HTML5Boilerplate 的.visuallyhiddenclass 的方法。有关此的更多详细信息，请参阅：
另一个潜在的问题是颜色的使用。不要仅仅依靠颜色的变化来指示选中的控件，那是 WCAG 的失败。本机收音机和复选框涉及形状变化（即填充圆圈的子弹）。请注意，当使用 Windows 高对比度主题时，CSS 颜色会被覆盖。如果 background: red 是唯一 选中（或聚焦）单选选项的线索，Windows 高对比度用户将不知道发生了什么。