Discussion

Color the Drop Down field background with CSS

Forms Web Customizations

Updated May 14, 2021

posted on May 13, 2021

I have set my fields to have light yellow background for all fields required but I am stuck on how to do this for the Drop Down Fields.

I tried adding a class to the field and setting the color this way.

I've tried a bunch of combinations with Field, Select, etc and this is the only one I had change the color. Problem is it applied the color to the field but then when you make a selection the field does not populate with the selection.

.DDField input {background-color:lightyellow!important;}

@MatthewTingley @JasonSmith

BTW, does anyone know of a CSS selector that can identify all required fields to change their background colour. I added a Class to those fields but wondering if there is a simplier approach.

Thanks all

0 0

Comments 7
Follow-Ups 0

replied on May 13, 2021

Thank you, works great in the Classic Designer but unfortunately not in the Modern Designer.

.cf-field > [required] { background-color: lightyellow!important; }

0 0

View 2 previous replies

replied on May 13, 2021

I haven't had a chance to dig into the modern designer yet so there's a couple of options:

1) Remove the .cf-field selector and just use

[required] { background-color: lightyellow; }

2) Inspect the page and see what the new parent structure is for the inputs and update the css selectors accordingly.

0 0

replied on May 13, 2021 • Show version history

The easiest way I found was to give the required fields a dedicated CSS class (in this example I used "requiredHighlight")

Then in CSS add the following code:

.requiredHighlight input { background-color: lightyellow!important;}

The end result:

1 0

replied on May 13, 2021

Thank you Stephen for this! This helped me out :)

1 0

replied on May 13, 2021

I had originally done it your way Stephen as in my original post, but what is happening is that the field is yellow, but when I make a choice in the drop down it doesn’t populate the field. (LF Cloud)

0 0

replied on May 14, 2021

Hi Steve,

Unless I'm overlooking something, I'm not sure if that's possible in the new forms.

The drop-down part of the list is a separate HTML element that opens, and it doesn't have the same class (or any linked classes/IDs) as the parent drop-down list. There is an id (highlighted in red), but it's dynamic and changes every time a form is opened.

0 0

replied on May 13, 2021 • Show version history

You can use CSS to target anything with the required attribute.

.cf-field > [required] {
  background-color: lightyellow;
}

2 0

You are not allowed to follow up in this post.

Discussion

Discussion

Color the Drop Down field background with CSS

Comments 7

Follow-Ups 0

Sign in to reply to this post.