You are viewing limited content. For full access, please sign in.

Question

Question

Is there a way to change checkbox color on input?

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:

 //When any change is made to a field with the .apchange class, make the input text red
  $(document).on('change', '.apchange input', function(){

    $(this).css('color', 'red');
  });
  
  
  //When any change is made to a field with the .apchange class, make the selected dropdown item red
  $(document).on('change', '.apchange select', function(){

    $(this).css('color', 'red');
  });

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

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

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

input[type=checkbox]:checked + label {color: red};
0 0
replied on May 6

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.

Sign in to reply to this post.