Question

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

要求是有一些酒吧，当我点击时，文本＆＃34;你好＆＃34;将显示在该栏附近。当我点击另一个栏时，＆＃34;你好＆＃34;上一个栏中的文字应该隐藏，点击栏中的＃34;你好＆＃34;文字应该是可见的。

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

但我想要的是每个栏都应该作为切换按钮来显示/隐藏＆＃34;你好＆＃34;文本。如果我使用复选框而不是单选按钮，我可以实现这一点，但我将失去上面使用单选按钮实现的行为。

我正在寻找纯粹的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>

输入广播和复选框特征

1 个答案: