如何在CSS中使用checked伪类_复选框单选框状态控制

input[type="checkbox"]:checked {
  box-shadow: 0 0 5px blue;
}

<input type="checkbox" id="toggle">
<label for="toggle">点击我</label>

#toggle {
  display: none; /* 隐藏原始复选框 */
}

#toggle + label {
  background-color: #ccc;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

#toggle:checked + label {
  background-color: #4CAF50;
  color: white;
}

<input type="checkbox" id="show-content">
<label for="show-content">显示更多内容</label>
<div class="extra-content">
  <p>这里是额外的信息内容。</p>
</div>

.extra-content {
  display: none;
}

#show-content:checked ~ .extra-content {
  display: block;
}

<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">标签一</label>

<input type="radio" name="tab" id="tab2">
<label for="tab2">标签二</label>

<div class="panel">
  <div class="tab-content" id="content1">这是第一个标签页的内容。</div>
  <div class="tab-content" id="content2">这是第二个标签页的内容。</div>
</div>

.tab-content {
  display: none;
}

#tab1:checked ~ .panel #content1,
#tab2:checked ~ .panel #content2 {
  display: block;
}