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

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

在此示例中，我们的目标是设置选定单选按钮标签的样式。但是，提供的 CSS 似乎没有按预期工作。让我们分析 HTML 和 CSS 代码来确定问题。

HTML 代码包含一个带有“radio-toolbar”类的 div，其中包含单选按钮及其标签。每个单选按钮都使用 display: none; 隐藏。标签应用了样式，包括背景颜色、边框和填充。

转到 CSS，第一条规则隐藏单选按钮输入，这是正确的。第二条规则设置标签本身的样式。问题在于第三条规则，该规则旨在设置所选单选按钮的标签样式。

在第三条规则中，我们尝试使用以下方法选择紧邻选中的单选按钮的标签元素选择器：.radio-toolbar标签输入[type =“radio”]：选中。但是，选择器仅匹配紧邻的前一个元素。在这种情况下，它期望单选按钮输入位于标签之前，但在 HTML 代码中，标签位于输入之前。

更正了 CSS

要解决此问题，我们可以请改用以下 CSS：

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

通过将选择器更改为 .radio-toolbar input[type="radio"]:checked 标签，我们确保背景颜色应用于选中的单选按钮输入后面的标签。

功能的其他更改

除了选择器问题之外，我们还可以进行一些其他更改以获得更好的功能:

1. 标签建议使用 inline-block 来正确对齐。
2. 设置标签上的 for 属性和单选按钮上相应的 id 属性将正确关联它们。

这是更新的 HTML 和CSS:

HTML:

<div class="radio-toolbar">
  <input type="radio">

CSS:

.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 中正确设置所选单选按钮标签的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！