Question

我正在尝试创建一个仅限CSS的选择。我有一个带三个radiobuttons的容器。有源无线电按钮必须放在容器的中间（垂直）。无线电按钮必须作为一个整体移动，这意味着如果选择顶部无线电按钮，则另外两个必须在其下方间隔开;如果选择中间无线电按钮，则其他无线电按钮必须在所选择的无线电按钮的正上方和下方间隔开。这很难解释，但听到的是我到目前为止所得到的。 http://jsfiddle.net/PaulvdDool/ZwdUL/1/

在此示例中，蓝色按钮位于容器的中间。当我选择绿色按钮时，所有三个按钮必须向下移动125px（一个按钮的高度）。但我不能让它发挥作用。

当选中一个单选按钮时，我似乎无法影响其他单选按钮。我试图在按钮周围放一个额外的容器并改变边缘顶部，但我无法影响容器。

<div id="extracontainer">
<form>
<radiobutton 1 + label>
<radiobutton 2 + label>
<radiobutton 3 + label>
</form>
</div>

我还尝试在按钮上方放置一个额外的div并改变高度，但我也不能影响这个div。

<div id="spacer"></div>
<form radiobuttons>

我猜我正在使用错误的选择器，做错其他事情或正在尝试用只是css 做一些不可能的事情。

任何 CSS 解决方案？

Answer 1

这里你真正需要的是jQuery或其他一些JavaScript库（或者如果你是一个本机js怪物，一个纯JavaScript）。您需要捕获事件，然后更改要更新的相应元素的CSS属性。

此时无法通过CSS执行此操作。

我希望这会有所帮助。

Answer 2

这可以做到。这都是特殊性和文档结构的问题。

我必须为每个标签添加一个类：cPantsx其中x与裤子收音机的号码相同。

然后我不得不按如下方式重新排列html：

<div id="pantscontainer">
    <input type="radio" name="pants" id="pants1" value="pants1" />
    <input type="radio" name="pants" id="pants2" value="pants1" />
    <input type="radio" name="pants" id="pants3" value="pants1" />
    <label for="pants1" class='cPants1'><span></span></label>
    <label for="pants2" class='cPants2'><span></span></label>
    <label for="pants3" class='cPants3'><span></span></label>
</div>

所有内容都必须position:relative;，以便我可以调整容器中的位置。

之后，魔法真的发生在这里：

#pantscontainer > input[id="pants1"]:checked ~ .cPants1 span{
    top:125px;   
}
#pantscontainer > input[id="pants1"]:checked ~ .cPants2 span{
    top:-125px;   
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants2 span{
    top:0px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants1 span{
    top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants3 span{
    top:-125px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants1 span{
    top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants2 span{
    top:125px;
}

基本上通过调整页面上元素的位置，我能够非常专门地定位有问题的元素，并确保它们总是移出彼此的方式。

Here is a fork of your fiddle

我应该提到这绝不是一个简单的解决方案。它更像是纸牌屋。如果你必须添加更多元素，则需要重新编写整个元素。它会扩展，但这需要付出很多努力。

使用css检查单选按钮时是否影响div

2 个答案: