Изменить цвет фона для ботстрапа 4

Мне интересно, как я могу изменить цвет фона флажков Bootstraps 4 на данном примере.

Большое спасибо!

    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css'; return false;" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">  

<style>  
.custom-control-label::before,   
.custom-control-label::after {  
top: .8rem;  
width: 1.25rem;  
height: 1.25rem;  
}  
</style>  


<div class="custom-control form-control-lg custom-checkbox">  
    <input type="checkbox" class="custom-control-input" id="customCheck1">  
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>  
</div>

Ответ 1

Вы можете использовать следующий CSS, чтобы сделать его красным, когда он не отмечен, и черным, когда он отмечен

.custom-control-label:before{
  background-color:red;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color:black;
}

Цвет стрелки можно изменить с помощью следующего кода

.custom-checkbox .custom-control-input:checked~.custom-control-label::after{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

этот код сделает галочку красной, вы можете изменить цвет, изменив значение fill='red' на цвет по вашему выбору.

Редактировать: Обратите внимание, если указан цвет RGB, например. # 444444 использовать% 23 для хеша, например. % 23444444

Или вы можете использовать любое изображение, которое вам нравится.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
    .custom-control-label:before{
        background-color:red;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
        background-color:black;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::after{
        background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    }
    .custom-control-input:active~.custom-control-label::before{
        background-color:green;
    }
   
    /** focus shadow pinkish **/
    .custom-checkbox .custom-control-input:focus~.custom-control-label::before{
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.25); 
    }
</style>  

<div class="custom-control form-control-lg custom-checkbox">  
    <input type="checkbox" class="custom-control-input" id="customCheck1">  
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>  
</div>

Ответ 2

Я хотел бы добавить здесь ответ, который немного проще и более универсальный вариант ответа knetsi, для тех, кто может не заинтересоваться изменением цвета, зависящим от :checked псевдокласса.

Я просто хотел определить класс my-error который я могу добавить или удалить, чтобы изменить его цвет, в этом случае, чтобы отразить условие ошибки. Цвет остается неизменным, если флажок установлен или нет.

Вот как он выглядит в коде:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<style>
  .custom-checkbox .custom-control-input.my-error~.custom-control-label::before{
    background-color:orangered;
  }
</style>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input my-error" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Ответ 3

Разработка приложений Веб-дизайн

        <div class="custom-control custom-radio custom-control-inline">
          <input type="checkbox" id="customRadioInline3" name="customRadioInline1" class="custom-control-input">
          <label class="custom-control-label" for="customRadioInline3">Graphic Design</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
          <input type="checkbox" id="customRadioInline4" name="customRadioInline1" class="custom-control-input">
          <label class="custom-control-label" for="customRadioInline4">SEO</label>
        </div>
       </div>