Question

是否有一种纯CSS方式来设置一组单选按钮的样式，这样当它们都没有被检查时它们会以某种方式显示？对于几个问题，这将是单选按钮的默认状态（出于法律原因）。

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

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

使用:checked选择器很容易做到条件＃2。但这本身就会让所有三个都处于默认状态。请参阅代码片段以获取一个非常基本的示例。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我认为你可以用JavaScript做到这一点。单独，我不相信你可以在CSS中这样做，因为你需要的是检查radio-button是否被选中，你不能在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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

它的代码笔是here。

Answer 3

这不是你想要的，因为虽然这种样式区分了已检查和未检查的状态，但它不是通过不透明度而是通过使用不同的颜色。也许你可以根据自己的需要进行调整。

希望它有所帮助。 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>

纯CSS在未选中任何单选按钮时设置单选按钮组的方式？

3 个答案: