具有单选和复选框特征的输入

Question

我希望设计一个输入字段，使其遵循单选按钮特性和复选框特性。

要求是有一些栏，当我点击这些栏时，文本 "hello" 将显示在该栏的旁边。当我单击另一个栏时，前一个栏中的 "hello" 文本应该隐藏，而被单击的栏的 "hello" 文本应该可见。

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

但我想要的是每个栏都应充当 show/hide "hello" 文本的切换按钮。如果我使用复选框而不是单选按钮，我可以实现这一点，但我将失去上面使用单选按钮实现的行为。

我正在寻找一个纯粹的 css 解决方案。

提前致谢。

编辑:

这就是我想要的。 Fiddle

但只使用 css.

Answer 1

如果您负担得起编辑 html 并且实在负担不起使用任何 javascript，您可以使用 <input type='reset' /> 来完成，但这是一种 hacky 方式处理此类功能 - 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>

具有单选和复选框特征的输入

Input with both Radio and checkbox characteristics

html

css

checkbox

radio-button