Пользовательский флажок в начальной загрузке 4.1.x - PullRequest
Новая
       6

Пользовательский флажок в начальной загрузке 4.1.x

0 голосов
/ 25 декабря 2018

Мне нужен флажок, подобный этому или похожему

enter image description here

Существует множество ответов о флажках стиля, но ни один из них не работал в начальной загрузке 4.1.x,либо я использую их неправильно, либо они не работают в этой версии начальной загрузки. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

1 Ответ

0 голосов
/ 25 декабря 2018

Измените 

 <span class="custom-control-description">Check this custom checkbox</span>

на 

<span class="custom-control-label">Check this custom checkbox</span>

Если вам не хватает метки класса, это не должно быть описание, это должна быть метка. 

const checkbox = document.getElementById('checkbox')
checkbox.checked = true
.custom-control-input:checked~.custom-control-label::before {
    color: white !important;
    background-color: green !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<label class="custom-control custom-checkbox">
      <input type="checkbox" id="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-label">Check this custom checkbox</span>
</label>

Вот примечания к выпуску

...