Checkbox Arka Plan Rengi Nasıl Değiştirilir?

Checkbox onay kutucuklarının seçili durumdayken arka plan renkleri default olarak lacivert tonunda bir mavi gibi oluyor ve örneğin bir form hazırlarken kurumsal kimliği çok farklı bir renk olan bir tasarımda çok çirkin görünebiliyor. Doğrudan css içinde checkbox'a arka plan rengi vermek de işe yaramadığı için ya internette bu amaçla hazırlanmış css kütüphanelerden (csscheckbox.com gibi) indirip kullanmanız gerekiyor, ya da aşağıdaki gibi bir çözüm ile checkbox'ın arka plan rengini değiştirebilirsiniz.

Örneğin turuncu renk (#ff7200) kodunda bir arka plan rengine sahip bir checkbox için:

HTML:

<div class="container"> 
  
  <div class="checkbox">
     <input type="checkbox" id="checkbox" name="" value="">
     <label for="checkbox"><span>Onay Kutusu</span></label>
  </div>

</div>

CSS (SCSS):

$renk: #FF7200; 
.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
    label {
        position: relative;
        min-height: 34px;
        display: block;
        padding-left: 40px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
        span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            margin: 4px;
            width: 22px;
            height: 22px;
            transition: transform 0.28s ease;
            border-radius: 3px;
            border: 2px solid $renk;
        }
        &:after {
            content: '';
            display: block;
            width: 10px;
            height: 5px;
            border-bottom: 2px solid $renk;
            border-left: 2px solid $renk;
            transform: rotate(-45deg) scale(0);
            transition: transform ease 0.25s;
            position: absolute;
            top: 12px;
            left: 10px;
        }
    }
    input[type="checkbox"] {
        width: auto;
        opacity: 0.00000001;
        position: absolute;
        left: 0;
        margin-left: -20px;
        &:checked ~ label{
            &:before {
                border: 2px solid $renk;
            }
            &:after {
                transform: rotate(-45deg) scale(1);
            }
        }
        &:focus + label::before {
            outline: 0;
        }
    }
}