1

重複の可能性:
チェックボックスがオンの場合はラベルを強調表示 (html/css)

ラジオがチェックされている場合、ラベルに赤い境界線が表示されるようにします。

これまでのコード:

HTML:

<center style="margin-top:20px;">

<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>

<br/>

<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>

</center>

CSS:

.big {
    display:block;
    width:100px;
    height:100px;
    background-color:gainsboro;
    cursor:pointer;
}

.big:hover {

    border:1px solid blue;
}

JS ソリューションはありません。兄弟セレクターと子セレクターを試してみましたが、うまくいきませんでした。

JSFIDDLE: http://jsfiddle.net/QqVCu/10/

4

3 に答える 3

2

あなたが試みていることはあなたのhtmlの現在の構造では不可能です。親セレクターのようなものはありません。兄弟セレクターがありますが、それはあなたが求めていることを達成するために使用することができます。まず、htmlを次のように再構築する必要があります。

<div>      
    <input name="radio-group1" id="box1" type="radio" />
    <label class="big" for="box1">
    This is a box 1</label>   
</div>


<div >    
    <input name="radio-group1" id="box2" type="radio" class='sex' /> 
    <label class="big" for="box2" >
    This is a box 2</label>
</div>

親子の代わりにラベルと入力の兄弟を作成しました。IDと属性のおかげで、引き続き同じように機能します。また、次の兄弟セレクターを使用できるように順序を変更しました。余分なdivは、フィドルでの順序と同じ順序に戻すために、絶対的なポジショニングを行うために必要です。

次に、cssを数行追加しました。本当の魔法はここで起こります：

div input:checked+label  {
    border: 1px solid red;   
}

これにより、チェックされ、親としてdivを持つ入力のすべての「次の兄弟」が選択されます。これをさらに微調整して、ラジオでのみ機能するようにすることもできます。実際には、ラッパーdivにクラスを追加しますが、これは単なる「概念実証」です。追加したcssの残りの部分は、例で使用したレイアウトを模倣するための配置です。これにも微調整が必​​要です。

実例はここにあります：http：//jsfiddle.net/QqVCu/14/

于 2012-08-27T23:45:15.723 に答える
2

label/red-border-element がラジオの後にくるように、HTML を再配置する必要があります。

HTML

<center style="margin-top:20px;">

<div class="big">
    <input id="box1" name="radio-group1" type="radio" />
    <label for="box1">This is a box 1</label>
</div >

<br/>

<div class="big">
    <input id="box2" name="radio-group1" type="radio" />
    <label for="box2">This is a box 2</label>
</div >

</center>

CSS

.big {
    display:block;
    width:100px;
    height:100px;
    background-color:gainsboro;
    cursor:pointer;
    position: relative;
}

.big:hover {

    border:1px solid blue;
}


label {
    width: 100%;
    height: 100%;
    display: block;
}

input[type="radio"] {
    position: absolute;
    top: 20px;
    left: 50%;
}

input[type="radio"]:checked + label {
    border: red 1px solid;
}
​

http://jsfiddle.net/QqVCu/12/

しかし、それは奇妙になり始めます。少しのJavaScriptは問題ありません。

編集：このバージョンは少しきれいです

于 2012-08-27T23:16:48.047 に答える
2

:checkedselectorを使用できますが、これはチェックボックス自体に対してのみ機能します。それ以外の場合は、純粋な CSSでそれを行う方法はありません。JavaScript に頼る必要があります (回避したいとおっしゃっていたことは承知していますが、純粋な CSS では実行できません)。

于 2012-08-27T23:09:29.107 に答える