具有 Radio 和 checkbox 特征的输入答案

【问题标题】：Input with both Radio and checkbox characteristics具有 Radio 和 checkbox 特征的输入
【发布时间】：2015-06-13 00:38:42
【问题描述】：

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

要求是有一些栏，当我点击这些栏时，会在该栏旁边显示一个文本“你好”。当我点击另一个栏时，前一个栏的“你好”文本应该隐藏，点击的栏的“你好”文本应该是可见的。

这发生在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。

【问题讨论】：

电台兼？呃……那是什么？
@Mr_Green 我很困惑，你为什么不只使用复选框？单选框是单选......这就是它们的重点。
好像没办法..我会在5分钟内删除这个问题。
@Ruddy 如果我使用复选框，当我点击另一个栏时，我将无法隐藏该文本。
@NoDownvotesPlz OP 确实说过只使用 CSS，使用 Javascript 我相信 OP 可以轻松地自己完成。

标签： html css checkbox radio-button

【解决方案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>

【讨论】：