純粹的CSS樣式單選按鈕組的方式沒有選中單選按鈕時？

Question

是否有純粹的CSS方式來設計一組單選按鈕，以便在沒有選中任何一個按鈕時以某種方式查看？對於幾個問題，這將是單選按鈕的默認狀態（出於合法原因）。

總體來說，我想要做的是有兩個條件：

1. 如果沒有一個單選按鈕的檢查，顯示全綵色的所有三個單選按鈕/阻
2. 如果的一個選中單選按鈕，以全色/不透明顯示該按鈕，但其他兩個稍微變鈍/變灰。

使用:checked選擇器很容易做到條件2。但是，這本身會使所有三個呈現默認狀態的鈍/變灰。看一個非常基本的例子的代碼片段。

我意識到這可以用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-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。

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。

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>