CSS - Wie man ein ausgewähltes Radio Buttons Label style?

Question

ich einen Stil auf ein Optionsfeld des ausgewählten Beschriftung hinzufügen möchten:

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

Irgendwelche Ideen, was ich falsch mache?

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>

Zu allererst Sie wahrscheinlich das name Attribut auf den Radio-Buttons hinzufügen möchten. Ansonsten gehören sie nicht zur selben Gruppe und es können mehrere Optionsfelder überprüft werden.

Auch, da ich die Etiketten als Geschwister (der Radio-Buttons) platziert, musste ich die id und for Attribute verwenden, um sie miteinander zu verbinden.

Answer 2

Sie verwenden einen benachbarten Geschwisterselektor (+), wenn die Elemente keine Geschwister sind. Das Etikett ist der übergeordnete des Eingangs, nicht seine Geschwister.

CSS hat keine Möglichkeit, ein Element basierend auf seinen Nachkommen auszuwählen (und auch nichts, was darauf folgt).

Sie müssen nach JavaScript suchen, um dies zu lösen.

Alternativ neu anordnen Ihr Markup:

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

Answer 3

Wenn Sie die Kontrollkästchen wirklich innerhalb des Labels platzieren möchten, versuchen Sie, ein zusätzliches span-Tag hinzuzufügen, z.

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

, dass die Hintergründe für alle Geschwister des ausgewählten Optionsfelds eingestellt wird.

Answer 4

Sie können einen Bereich zu Ihrem HTML und CSS hinzufügen.

Hier ist ein Beispiel aus meinem Code ...

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-Standard Radio-Button auf dem Bildschirm verschwinden zu machen und benutzerdefinierte Schaltfläche Bild überlagert:

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