[解決済み] CSS - どのように選択されたラジオボタンのラベルをスタイルするには？

質問

ラジオボタンの選択ラベルにスタイルを追加したい。

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

何が間違っているのか、何か思い当たることはありますか？

解決方法は？

.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 属性を使って関連付けることができます。