Question

Is there a way to change checkbox color on input?

Forms Web Customizations

Updated May 6, 2019

asked on May 18, 2016 • Show version history

I have script already working to change select items (dropdowns) and input areas to have red text when they are changed in a specific version of a form; however, I can't figure out how to get checkboxes to show red (either the checkmark itself or the label) if they are changed.

Also, my existing scripts are apparently not targeting multi-line fields. Can someone help me with the script to target them as well? Both portions of my code relating to making changed fields appear red are below:

01//When any change is made to a field with the .apchange class, make the input text red
02 $(document).on('change', '.apchange input', function(){
03 
04   $(this).css('color', 'red');
05 });
06  
07  
08 //When any change is made to a field with the .apchange class, make the selected dropdown item red
09 $(document).on('change', '.apchange select', function(){
10 
11   $(this).css('color', 'red');
12 });

Any help is appreciated!

0 0

Answer

SELECTED ANSWER

replied on May 18, 2016

To apply the information provided by Scott to your specific scenario, add the following JS to account for multi-line fields with the apchange class

1$(document).on('change', '.apchange textarea', function(){
2  $(this).css('color', 'red');
3});

And for making the checkbox labels red when checked, you can use this CSS

`1`	`input[type=checkbox]:checked + label {color:` `red};`

0 0

replied on May 6, 2019

Hey Alex,

Stumbled on this, could you please tell how to Fill the Checkbox or make the border Green ...

Thanks!

0 0

Replies

replied on May 18, 2016

CSS styling of checkboxes is difficult and displays inconsistently across many different browsers. There are more complicated approaches if you like. There is a good summary of several different approaches on this Stack Overflow discussion:

https://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css

Regarding the multi-line fields... those are actually "textarea" HTML elements and not "input" elements. You will need something like what you have above only replace the "input" or "select" with "textarea".

1 0

replied on June 17, 2016

Thank you so much!! I have been crazy busy with harvest season and am just now able to return to this project, and this JS and CSS works perfectly. Thank you for helping me out!

0 0

You are not allowed to follow up in this post.

Question

Question

Is there a way to change checkbox color on input?

Answer

Replies

Sign in to reply to this post.