仅使用 css 打开单选按钮

Question

我正在尝试使用 css 打开一个单选按钮： 我有一个单选按钮 1 和一个单选按钮 2。 在单选按钮 2 l 中 有一个内容我想强调一下。 在带有 css 目标的单选按钮 1 和 html 中 - a href="#example"- /a 在单选按钮2 -div 中突出显示 id=“示例”： /div- 但我不能，重播按钮不会点击自己，而且我不能使用js。 想法？

Answer 1

我很高兴帮助您使用 CSS 实现所需的单选按钮行为，但使用纯 CSS 直接突出显示基于所选单选按钮状态的内容是不可能的。这是一个结合了 CSS 样式和 :checked 伪类以实现条件可见性的解决方案：

#example {
  display: none; /* Initially hide the content */
}

input[type="radio"]:checked + #example {
  display: block; /* Show the content only when radio2 is checked */
  background-color: lightblue; /* Highlight the content */
}

<input type="radio" id="radio1" name="radio-group">
<label for="radio1">Radio Button 1</label>

<input type="radio" id="radio2" name="radio-group" checked>
<label for="radio2">Radio Button 2</label>

<div id="example">This is the content to highlight.</div>