如何在 CSS 中设置选定单选按钮标签的样式？

如何在 CSS 中设置选定单选按钮标签的样式

单选按钮在 Web 界面中提供了一种独特的交互元素，允许用户选择一个来自一组的选项。为了增强其视觉吸引力，通常需要对与所选单选按钮关联的标签进行样式设置。

问题：

您在尝试使用 CSS 将样式应用到选定单选按钮的标签。您当前的代码片段包括以下内容：

.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

识别问题：

此 CSS 选择器不起作用，因为相邻同级选择器“ ”仅匹配它后面的元素的第一个实例。但是，在 HTML 代码中，标签并不紧邻输入元素。

解决方案：

要设置所选单选按钮的标签样式， CSS 选择器必须专门针对与已检查输入关联的标签元素。这可以使用标签中的“for”属性和相应输入元素中的“id”属性来实现，如以下代码所示：

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

通过调整 CSS 选择器，代码现在可以正确定位所选单选按钮的标签并应用所需的样式。