Question

Change color of required field label

Forms

Updated August 20, 2015

asked on August 18, 2015

I am looking to change the color of my required fields on a form. I know I can do this by adding a CSS class, but this is a form that was already created and has over 25 required fields. I looked in the source and saw that cf-required was a class assigned to fields which had the required attribute, but didn't have any success changing the text color of those fields. The css I tried is below. Let me know what I need to change to get the field text to change color.

Thanks,

Nate

.cf-required {color:red;}

0 0

Answer

SELECTED ANSWER

replied on August 20, 2015

Use this JavaScript. The required fields on the form when it loads will have a red label. Then anytime the "add" link is clicked on in a collection, it will apply the red label to new required fields.

$(document).ready(function () {
  $('.cf-required').parent().css('color', 'red');
  $('.cf-collection-append').on('click', function() {
    $('.cf-required').parent().css('color', 'red');
  });
});

1 0

Replies

replied on August 18, 2015

You can use this JavaScript

$(document).ready(function () {
  $('.cf-required').parent().css('color', 'red');
});

1 0

replied on August 20, 2015

Alexander,

Any way to make this apply to fields in a collection? I'm finding that the fields 'Added' are not Red like expected. Does it require using '.siblings'? If so, let me know where it needs to go in the code above.

Thanks,

Nate

0 0

SELECTED ANSWER

replied on August 20, 2015

$(document).ready(function () {
  $('.cf-required').parent().css('color', 'red');
  $('.cf-collection-append').on('click', function() {
    $('.cf-required').parent().css('color', 'red');
  });
});

1 0

replied on August 18, 2015

.cf-required is the CSS class for the asterisk symbol of the required field. To apply a color to the actual field, you will either have to give the actual field a CSS class name and call it, or use the fields ID like the following:

#Field1 { color:red; }

0 0

You are not allowed to follow up in this post.

Question

Question

Change color of required field label

Answer

Replies

Sign in to reply to this post.