Установите флажок Bootstrap 4 без надписи - PullRequest
0 голосов
/ 25 февраля 2019

Я пытаюсь оформить флажок Bootstrap 4 без метки:

<div class="form-check">
    <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>

Мои стили проб и ошибок:

  .form-check {
      .form-check-input {
        color: #2c2b2c;
        font-size: 12px;
        line-height: 2.7;
        padding-left:15px;
        text-transform: uppercase;
        background-color: red;
      }
      .form-check-input::after,
      .form-check-input::before {
        height: 25px;
        width: 25px;
      }
      .form-check-input::before {
        background-color: #fff;
        border: 1px solid #2c2b2c;
      }
    }
  }

Я могу стилизовать версию метки, но безуспешно с этой версией.

ОБНОВЛЕНИЕ: Как упоминалось @ mebin-joe, это известная проблема: https://github.com/twbs/bootstrap/issues/26221 В итоге я использовал элемент флажка Bootstrap и стилизовал его:

.custom-checkbox .custom-control-input:checked~.custom-control-label::before
{
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...