CSS - 選択したラジオボタンのラベルをスタイルするにはどうすればいいですか？

Question

私は、ラジオボタンの選択されたラベルにスタイルを追加したい：

HTML：

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked>All</label> 
<label><input type="radio" value="false">Open</label> 
<label><input type="radio" value="true">Archived</label> 
</div> 

CSS

.radio-toolbar input[type="radio"] {display:none;} 
.radio-toolbar label { 
    background:Red; 
    border:1px solid green; 
    padding:2px 10px; 
} 
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important; 
} 

私が間違ってやっている任意のアイデア？

Answer 1

.radio-toolbar input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.radio-toolbar label { 
 
    display: inline-block; 
 
    background-color: #ddd; 
 
    padding: 4px 11px; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
} 
 

 
.radio-toolbar input[type="radio"]:checked+label { 
 
    background-color: #bbb; 
 
}

<div class="radio-toolbar"> 
 
    <input type="radio" id="radio1" name="radios" value="all" checked> 
 
    <label for="radio1">All</label> 
 

 
    <input type="radio" id="radio2" name="radios" value="false"> 
 
    <label for="radio2">Open</label> 
 

 
    <input type="radio" id="radio3" name="radios" value="true"> 
 
    <label for="radio3">Archived</label> 
 
</div>

まず、あなたはおそらくラジオボタンにname属性を追加します。そうでない場合、それらは同じグループの一部ではなく、複数のラジオボタンをチェックすることができます。

また、（ラジオボタンの）兄弟としてラベルを配置したので、それらを関連付けるためにidとfor属性を使用する必要がありました。

Answer 2

要素が兄弟でない場合は、隣接する兄弟セレクタ（+）を使用しています。ラベルは入力の親のであり、兄弟ではありません。

CSSには、その子孫（それに続くもの）に基づいて要素を選択する方法がありません。

これを解決するには、JavaScriptを参照する必要があります。

また、あなたのマークアップを並べ替える：すべての

<input id="foo"><label for="foo">…</label> 

Answer 3

ラベル内にチェックボックスを入れたい場合は、追加のスパンタグを追加してください。選択したラジオボタンのすべての兄弟のための背景を設定します

HTML

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked><span>All</span></label> 
<label><input type="radio" value="false"><span>Open</span></label> 
<label><input type="radio" value="true"><span>Archived</span></label> 
</div> 

CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important; 
} 

。

Answer 4

htmlとcssにスパンを追加できます。

...ここに私のコードからの例です

HTML（JSX）：標準のラジオボタンが画面上に消え、カスタムボタン画像を重ね合わせる

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/> 
<label for="radiostyle1"><span></span> am </label> 

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/> 
<label for="radiostyle2"><span></span> pm </label> 

CSS：

input[type="radio"] { 
    opacity:0;          
} 

input[type="radio"] + label { 
    font-size:1em; 
    text-transform: uppercase; 
    color: white ; 
    cursor: pointer; 
    margin:auto 15px auto auto;      
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:30px; 
    height:10px; 
    margin:1px 0px 0 -30px;      
    cursor:pointer; 
    border-radius: 20%; 
} 


input[type="radio"] + label span { 
    background-color: #FFFFFF 
} 


input[type="radio"]:checked + label span{ 
    background-color: #660006; 
}