0

CSSのみの選択を作成しようとしています。3 つのラジオボタンを含むコンテナーがあります。アクティブなラジオボタンは、コンテナーの中央 (垂直方向) に配置する必要があります。ラジオボタンは全体として移動する必要があります。つまり、一番上のラジオボタンが選択されている場合、他の 2 つのボタンはそのすぐ下に配置する必要があります。中央のラジオボタンが選択されている場合、他のラジオボタンは、選択されたラジオボタンのすぐ上とすぐ下に配置する必要があります。説明するのは難しいですが、私がこれまでに得たものを聞いてください。 http://jsfiddle.net/PaulvdDool/ZwdUL/1/

この例では、青いボタンがコンテナの中央にあります。緑色のボタンを選択すると、3 つのボタンすべてが 125 ピクセル (1 つのボタンの高さ) に移動する必要があります。しかし、私はそれを機能させることはできません。

1つのラジオボタンがチェックされていると、他のラジオボタンに影響を与えることができないようです。ボタンの周りに追加のコンテナーを配置して、margin-top を変更しようとしましたが、コンテナーに影響を与えることができませんでした。

<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ソリューションはありますか?

4

2 に答える 2

0

これは可能です。それはすべて、文書構造だけでなく具体性の問題でもあります。

各ラベルにクラスを追加する必要がありました。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;
}

基本的に、ページ上の要素の配置を調整することで、問題の要素を非常に具体的にターゲットにして、それらが常に互いに離れていることを確認することができました.

これがあなたのフィドルのフォークです

これは決して簡単な解決策ではないことに注意してください。それはトランプの家のようなものです。さらに要素を追加する必要がある場合は、全体を書き直す必要があります。規模は拡大しますが、そうするには多大な労力が必要です。

于 2013-01-03T15:48:26.257 に答える
0

ここで本当に必要なのは、jQuery またはその他の JavaScript ライブラリ (または、ネイティブ js フリークの場合は純粋な JavaScript) です。イベントをキャプチャしてから、更新する対応する要素の CSS プロパティを変更する必要があります。

現時点では、CSS を介してこれを行うことはまったく不可能です。

これが役立つことを願っています。

于 2013-01-03T14:27:41.240 に答える