当没有选中任何单选按钮时，纯 CSS 样式单选按钮组的方式？

Question

是否有一种纯 CSS 方法来设置一组单选按钮的样式，以便在没有选中任何一个按钮时它们看起来具有某种特定的方式？这将是几个问题的单选按钮的默认状态（出于法律原因）。

总的来说，我想做的是有两个条件：

1. 如果未选中任何单选按钮，则以全彩色/不透明显示所有三个单选按钮
2. 如果选中其中一个单选按钮，则以全彩色/不透明显示该按钮，而其他两个则略微变暗/变灰。

使用:checked 选择器很容易实现条件#2。但这本身会使所有三个变暗/变灰处于默认状态。请参阅 sn-p 以获得一个非常基本的示例。

我意识到这可以用 javascript 完成，如果我需要走那条路，我会的。只是想看看是否有一种纯 CSS 方法来完成它。

input[type=radio]:not(:checked),
input[type=radio]:not(:checked)+label {
  opacity: 0.2;
}

<form>
<input type="radio" name="Question" value="Answer1" /> <label>Answer 1</label>
<input type="radio" name="Question" value="Answer2" /> <label>Answer 2</label>
<input type="radio" name="Question" value="Answer3" /> <label>Answer 3</label>
</form>

Answer 1

我认为你可以在 JavaScript 中做到这一点。独自一人，我不相信你可以在 CSS 中做到这一点，因为你需要它检查 radio-buttons 是否被选中，而你不能在 CSS 中拥有这种逻辑。

这是我在 JQuery 中汇总的一些代码（最简单的方法）：

$(function() {
    $("#radio1").click(function() {
      $("#radio2Text, #radio3Text, #radio2, #radio3").css("opacity", "0.2");
      $("#radio1, #radio1Text").css("opacity", "1");
      });
   $("#radio2").click(function() {
      $("#radio1Text, #radio3Text, #radio1, #radio3").css("opacity", "0.2");
      $("#radio2, #radio2Text").css("opacity", "1");
    });
    $("#radio3").click(function() {
      $("#radio1Text, #radio2Text, #radio1, #radio2").css("opacity", "0.2");
      $("#radio3, #radio3Text").css("opacity", "1");
    });
});

#radio1Text, #radio2Text, #radio3Text {
  opacity: 1;;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="Question" value="Answer1" id = "radio1"> <label id = "radio1Text">Answer 1</label>
<input type="radio" name="Question" value="Answer2" id = "radio2"> <label id = "radio2Text">Answer 2</label>
<input type="radio" name="Question" value="Answer3" id = "radio3"> <label id = "radio3Text">Answer 3</label>
</form>

Answer 2

这不是您要寻找的，因为虽然这种样式区分了选中状态和未选中状态，但它不是通过不透明度而是通过使用不同的颜色来区分的。也许您可以根据自己的需要对其进行调整。

希望对您有所帮助。 here's a fiddle

[name=radio] {
  display: none;
}

[for^=radio] {
  display: inline-block;
  vertical-align: top!important;
  position: relative;
  margin: 10px 15px 0px 15px;
  width: 120px;
}

[for^=radio]:before {
  display: inline-block;
  content: '';
  position: relative;
  margin: 0px 5px -10px 5px;
  width: 32px;
  height: 32px;
  background: red;
}

[type=radio]:checked + [for^=radio]:before {
  background: green;
}

<input id=radio-1 type=radio name=radio />
<label for=radio-1>Answer 1</label>
<input id=radio-2 type=radio name=radio />
<label for=radio-2>Answer 2</label>
<input id=radio-3 type=radio name=radio />
<label for=radio-3>Answer 3</label>

Answer 3

我试了一下，但只成功了一部分。这不是正确的答案，但它是纯 CSS 的。

input[type='radio']:not(:checked) + label
{
  opacity:1;
}

  input[type="radio"]:checked + label
  {
    opacity:1;
  }

input[type="radio"]:checked ~ input[type="radio"] + label
{
  opacity:0.5;
} 

<form>
  <div class="input-group">
<input type="radio" name="Question"  value="Answer1" id="one" />
  <label for="one">Answer 1</label>
<input type="radio" name="Question" value="Answer2" id="two" /> 
  <label for="two">Answer 2</label>
<input type="radio" name="Question" value="Answer3" id="three" />
  <label for="three">Answer 3</label>
  </div>
</form>

它的代码笔是here。