Bootstrap4でチェックボックスの色を変える #bootstrap4

Bootstrap4.1でチェックボックスの色を変えるのは簡単にできるが、ドキュメントに載っていなかったのでメモ。

<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        background-color:red;
    }
</style>
<body>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheckBox1">
        <label class="custom-control-label" for="customCheckBox1">Check this custom checkbox</label>
    </div>
</body>

</html>

See the Pen Bootstrap Custom Checkbox by pikanji (@pikanji) on CodePen.