Angular 7 - Change the checkbox color after checking as checked

Question

I have the following checkbox list:

I’m wearing Bootstrap 4 and Angular 7. I would like to know a way that when the checkbox is clicked, its line changes color, so it is easier for the user to know if he is clicking on the right permissions (Reading, Printing, Deleting and Writing).

EDIT: HTML code

<div id="test-l-4" class="content">
          <div class="form-group">
            <label for="funcionalidade">Funcionalidades</label>
            <div class="row">
              <div class="col">
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                  <input class="form-check-input" type="checkbox" id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                  <div class="form-check form-check-inline float-right" *ngFor="let op of operacoes; let i = index">
                    <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}" >{{op.operacao}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button (click)="back()" class="btn btn-primary mr-3">Back</button>
          <button (click)="next()" class="btn btn-primary">Next</button>
        </div>

Answer 1

As I said, you can use the pseudo class :checked and the selector + to catch the div direct sister of checkbox and put a background color on it

Basically you will need this CSS rule

.form-check-input:checked + div {
    background-color: red;
}

Follow the image code above

.form-check-input:checked + div {
    background-color: red;
}

<link rel="stylesheet" type="text/css" media="screen"    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

<div id="test-l-4" class="content">
    <div class="form-group">
        <label for="funcionalidade">Funcionalidades</label>
        <div class="row">
            <div class="col">
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
                <div class="form-check " *ngFor="let f of funcionalidades; let x = index">
                    <input class="form-check-input" type="checkbox"
                        id="{{ f.id_funcionalidade }}">{{ f.id_funcionalidade }} - {{ f.nome_funcionalidade }}
                    <div class="form-check form-check-inline float-right"
                        *ngFor="let op of operacoes; let i = index">
                        <input class="form-check-input" type="checkbox" id="checkinfo_{{x}}_{{i}}">{{op.operacao}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button (click)="back()" class="btn btn-primary mr-3">Back</button>
    <button (click)="next()" class="btn btn-primary">Next</button>
</div>