CSS - как стилизовать выбранную метку переключателей?

Question

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;

}

любые идеи, что я делаю неправильно?

510 4

html css css3

4 ответов:

Comments

Ничего не найдено.

Šime Vidas · Accepted Answer · 2017-02-28 05:33:58

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

iainbeeston · Accepted Answer · 2013-12-12 17:29:12

Если вы действительно хотите поставить флажки внутри метки, попробуйте добавить дополнительный тег 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;
}
это создаст фон для всех братьев и сестер выбранного переключателя.

Quentin · Accepted Answer · 2011-01-09 23:51:03

вы используете соседний селектор братьев и сестер (+), когда эти элементы не являются братьями и сестрами. Метка-это родитель из ввода, а не это брат.

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

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

кроме того, изменить разметку:
<input id="foo"><label for="foo">…</label>

Praveena Janakiraman · Accepted Answer · 2017-06-15 08:39:51

вы можете добавить промежуток к вашим 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;  
}