CSS - Wie gestalte ich ein ausgewähltes Optionsfeld-Label?

Ich möchte der ausgewählten Bezeichnung eines Optionsfelds einen Stil hinzufügen:

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?

.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>

Zunächst möchten Sie wahrscheinlich das nameAttribut in den Optionsfeldern hinzufügen . Andernfalls gehören sie nicht zur selben Gruppe, und mehrere Optionsfelder können aktiviert werden.

Da ich die Beschriftungen als Geschwister (der Optionsfelder) platziert habe, musste ich die Attribute idund verwenden for, um sie miteinander zu verknüpfen.

Wenn Sie die Kontrollkästchen wirklich in das Etikett einfügen möchten, fügen Sie ein zusätzliches Span-Tag hinzu, 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;
}

Dadurch werden die Hintergründe für alle Geschwister des ausgewählten Optionsfelds festgelegt.

Sie verwenden einen benachbarten Geschwister-Selektor ( +), wenn die Elemente keine Geschwister sind. Das Label ist das übergeordnete Element der Eingabe, nicht das Geschwister.

CSS hat keine Möglichkeit, ein Element basierend auf seinen Nachkommen (oder irgendetwas, das darauf folgt) auszuwählen.

Sie müssen auf JavaScript schauen, um dies zu lösen.

Alternativ können Sie Ihr Markup neu anordnen:

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

Sie können Ihrem HTML- und CSS-Bereich eine Spanne 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, damit Standard-Optionsfelder auf dem Bildschirm verschwinden und benutzerdefinierte Schaltflächenbilder überlagert werden:

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

Da es derzeit keine CSS-Lösung zum Stylen eines übergeordneten Elements gibt, verwende ich hier eine einfache jQuery-Lösung, um einer Beschriftung mit aktivierter Eingabe eine Klasse hinzuzufügen.

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

Vergessen Sie nicht, dem Label der vorab überprüften Eingabe auch die Klasse checkedlabelzu geben

Hier ist eine zugängliche Lösung

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

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