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

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

要为所选单选按钮的标签设置样式，请设置标签元素的样式并使用选择器来定位相邻的输入[type ="radio"] 选中后。

HTML标记

<div class="radio-toolbar">
  <label><input type="radio" value="all" checked>All</label>
  <label><input type="radio" value="false">Open</label>
  <label><input type="radio" value="true">Archived</label>
</div>

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中文网其他相关文章！