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

Есть идеи, что я делаю не так?

Ответы на вопрос(4)

+) когда элементы не являются братьями и сестрами. Этикетка являетсяродитель вход, а не брат.

У CSS нет возможности выбрать элемент на основе его потомков (и ничего, что следует за ним).

Вам нужно будет обратиться к JavaScript, чтобы решить эту проблему.

Или измените разметку:

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

Вот пример из моего кода ...

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

попробуйте добавить дополнительный тег span, например.

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

Это установит фоны для всех родных братьев выбранной радиокнопки.

 brichins05 нояб. 2015 г., 19:08
Я предпочел этот подход, хотя я использовал другой селектор ('+', как указано ниже ив этом вопросе как я хотел стилизовать только выбранный элемент. Это позволило мне не беспокоиться оfor атрибутов.
Решение Вопроса

..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 атрибуты, чтобы связать их вместе.

 Johncl07 дек. 2012 г., 14:00
Кажется, не работает в IE8.
 Šime Vidas07 дек. 2012 г., 15:30
@Johncl Это правда. IE8 не реализует:checked селектор.
 fabregas8815 авг. 2013 г., 20:32
Если я хочу выбрать ни вход [type = "radio"], ни вход [type = "checkbox"]. Какой правильный синтаксис, чтобы сделать это только в одном правиле и избегать этого: input [type = "radio"], input [type = "checkbox"]
 Šime Vidas02 авг. 2015 г., 17:58
@gcb Вопрос был в том, как скрыть стандартные переключатели. Я сделал этот прототипjsbin.com/miwati/edit?html,css,output, Радиокнопки абсолютно расположены за метками. Вероятно, не самый лучший подход, хотя.
 gcb30 июл. 2015 г., 00:35
Вы просто убили доступ к клавиатуре! надеюсь, что все ваши пользователи в состоянии. ... теперь, если вы просто удерживаете переключатель, не используяdisplay:none; тогда браузеры заставят это работать с клавиатурой просто отлично.

Ваш ответ на вопрос