Change input Checkbox value color when checked and uncheck

Question

I want to achieve the below:

when the checkbox is checked: change the value to green
When the checkbox is unchecked: change the value to black

CSS:

`<style>
  input[type="checkbox"]:checked + value:before{
  color: green;
}
</style>`

HTML

              <tr class="bg-primary text-white">                  
                <th scope="col" class="text-left">Email 1</th>                          
              </tr>


<ng-container *cdkVirtualFor="let contact of myContact">
              <tbody >
              <tr style="width:100%; min-height: 30px;">                   
                <td class="text-left " [title]="contact.mail1">
                   <input type = "checkbox"   value="{{contact.emails}}" id="checkboxEmail1"
                          [checked]="contact.emails === 1 || contact.emails === 3"
                          (change)="editContactEmail1(contact.id, $event)"
                          [disabled]="contact.sajpContact != 1" />
                  {{(contact.mail1.length>25) ? (contact.mail1 | slice:0:25) + '...' : (contact.mail1)}}
                </td></tr></tbody></ngcontainer>

Just change input itself: input[type="checkbox"]:checked {} — demkovych
– demkovych, Commented Jan 31, 2020 at 12:50

Diogenis Siganos · Accepted Answer · 2020-02-05 10:34:05Z

2

You should add the following jQuery code:

$('input[type="checkbox"]').click(function() {
    if ($(this).is(":checked")) {
        setTimeout(() => { $(this).css({'outline': '2px solid green', 'outline-offset': '-2px'}); }, 1000);
    } else {
        setTimeout(() => { $(this).css({'outline': '2px solid black', 'outline-offset': '-2px'}); }, 1000);
    }
});

edited Feb 5, 2020 at 10:34

answered Jan 31, 2020 at 12:53

Diogenis Siganos

7977 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Augustine Over a year ago

I bind the checkbox value. I would want to set a timeout for the checkbox value to change color when checked and back to default color.

Diogenis Siganos Over a year ago

So you suggest using jQuery?

Diogenis Siganos Over a year ago

Answer updated. (as it turns out to be impossible to change the checkbox color without creating a custom one, I add an outline to the checkbox)

Augustine Over a year ago

Thank you Bonfire.

user9700852 · Accepted Answer · 2020-01-31 19:11:58Z

0

And don’t put the `

<style> ...

Quotes!

Is it normal ? Is it server-side format ?

answered Jan 31, 2020 at 19:11

user9700852

91 bronze badge

Collectives™ on Stack Overflow

Change input Checkbox value color when checked and uncheck

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related