同時具有收音機和複選框特性的輸入

Question

我期待設計一個輸入字段，使其符合單選按鈕的特性以及複選框的特性。

要求是有一些酒吧，當我點擊時，文本「你好」將顯示在該欄旁邊。當我點擊另一個欄時，上一欄中的「hello」文本應該隱藏，點擊欄中的「hello」文本應該可見。

這在this fiddle

label { 
    display: block; 
    width: 100px; 
    height: 20px; 
    background-color: cornflowerblue; 
    position: relative; 
    margin-top: 10px; 
    cursor: pointer; 
} 
span { 
    display: none; 
} 
input[type="radio"] { 
    visibility: hidden; 
    position: absolute; 
    pointer-events: none; 
} 
:checked + span { 
    display: block; 
    position: absolute; 
    left: 100%; 
} 

發生，但我要的是各條應切換按鈕動作顯示/隱藏「你好」的文字。如果我使用複選框而不是單選按鈕，我可以實現這一點，但是我將失去使用單選按鈕實現的行爲。

我正在尋找一個純粹的css解決方案。

在此先感謝。

編輯：

這就是我想要的。 Fiddle

但只使用css。

Answer 1

如果你能負擔得起編輯HTML和實​​在不能用任何JavaScript就可以使用<input type='reset' />做到這一點，但是這是處理此類功能的哈克的方式 - 的JavaScript應始終是你的第一個這些任務的選擇。

label { 
 
    display: block; 
 
    width: 100px; 
 
    height: 20px; 
 
    background-color: cornflowerblue; 
 
    position: relative; 
 
    margin-top: 10px; 
 
    cursor: pointer; 
 
} 
 
span { 
 
    display: none; 
 
} 
 
input[type="radio"] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    } 
 
input[type="reset"] { 
 
    position: absolute; 
 
    border:0;padding:0;margin:0;background:transparent; 
 
    width:100%; 
 
    height:100%; 
 
    display: none; 
 
} 
 
:checked + span { 
 
    display: block; 
 
    position: absolute; 
 
    left: 100%; 
 
} 
 
:checked + span + input[type="reset"] { 
 
    display: block; 
 
    opacity:0; 
 
}

<form> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
<label> 
 
    <input type="radio" name="test"></input> <span>Hello</span> 
 
    <input type='reset' /> 
 
</label> 
 
</form>