title: Django Crispy Forms Form Helper - Custom Checkbox CSS Class
body: <p>I'm presently using Django's crispy forms to generate a HTML form.</p>
  
  <p>I would like to change the text of read-only check-boxes to white with an opacity of 0.5.</p>
  
  <p>Looking at the Chrome Developer Console, I see crispy forms is calling the .custom-control-input:disabled~.custom-control-label from <a href="https://stackpath.bootstrapcdn.com/bootstrap/scss/_custom-forms.scss" rel="nofollow noreferrer">https://stackpath.bootstrapcdn.com/bootstrap/scss/_custom-forms.scss</a>.</p>
  
  <p>Within the console I can change it without issue; the problem I face is trying to overwrite the scss class. </p>
  
  <p>Copying the relevant parts of the scss file, I've created a new one in my project:</p>
  
  <p><strong>.SCSS File:</strong></p>
  
  <pre><code>.mycustom-control {
      position: relative;
      display: block;
      min-height: ($font-size-base * $line-height-base);
      padding-left: $mycustom-control-gutter;
    }
  
    .mycustom-control-inline {
      display: inline-flex;
      margin-right: $mycustom-control-spacer-x;
    }
  
    .mycustom-control-input {
      position: absolute;
      z-index: -1; // Put the input behind the label so it doesn't overlay text
      opacity: 0;
  
      &amp;:checked ~ .mycustom-control-label::before {
        color: $mycustom-control-indicator-checked-color;
        @include gradient-bg($mycustom-control-indicator-checked-bg);
        @include box-shadow($mycustom-control-indicator-checked-box-shadow);
      }
  
      &amp;:focus ~ .mycustom-control-label::before {
        // the mixin is not used here to make sure there is feedback
        box-shadow: $mycustom-control-indicator-focus-box-shadow;
      }
  
      &amp;:active ~ .mycustom-control-label::before {
        color: $mycustom-control-indicator-active-color;
        background-color: $mycustom-control-indicator-active-bg;
        @include box-shadow($mycustom-control-indicator-active-box-shadow);
      }
  
      &amp;:disabled {
        ~ .mycustom-control-label {
          color: white;
          opacity: 0.5;
  
          &amp;::before {
            background-color: $mycustom-control-indicator-disabled-bg;
          }
        }
      }
    }
  </code></pre>
  
  <p>I've also loaded it in my <strong>HTML file</strong>:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="{% static "/checkboxes.scss" %}"&gt;
  </code></pre>
  
  <p>But how then do I get Django crispy forms to load the custom checkbox?</p>
  
  <p>Within my <strong>Python script</strong> the checkbox is defined as so:</p>
  
  <pre><code>computeapi = forms.BooleanField(required=False, disabled=True, label='Compute Engine',widget=forms.CheckboxInput(attrs={}))
  </code></pre>
  
  <p>This then is called later in the FormHelper Layout:</p>
  
  <pre><code>Fieldset(
          'APIs To Enable',
          Row(
              Column('computeapi', css_class='form-group col-md-3 mb-0', readonly=True),
  </code></pre>
  
  <p>It's within this 'css_class' I'm sure I need to enter the custom checkbox class, but everything I've tried so far hasn't worked (and I still need to maintain the form-group column alignment). </p>
  
  <p>My questions are:</p>
  
  <ol>
  <li><p>Is this defined css_class the correct place to call the custom checkbox?</p></li>
  <li><p>What is the correct syntax for calling the checkbox css_class?</p></li>
  </ol>
  
  <p>Any help with this would be greatly appreciated!</p>