Set background colors for fieldsets

Set different background colors for fieldsets in a form.

Overview

The issue was using an incorrect CSS selector, targeting a class instead of an ID.
Use the correct CSS ID selector with a # prefix for each fieldset, and apply background colors along with padding for the legend to ensure proper styling.

Answered
mo momentis 07 Jan, 2016
I have a form with 5 fieldsets. Is there a way to set the background color for each fieldset to something different? I want my users to be able to easily see the different sections.

Rick
mo momentis 07 Jan, 2016
Or at least one background (grey) alternated by fieldset (not by fields)?

Rick
mo momentis 07 Jan, 2016
Each fieldset has, of course, a unique ID. I have tried adding this to a Load CSS action:
.fieldset_id {
background-color:XXXXX;
}


Which does not work. I can wrap a DIV around what's inside the fieldset, but then it of course just adds color behind the fields.
Gr GreyHead 07 Jan, 2016
Answer
Hi Rick,

A CSS selector for an ID needs to begin with a # - a . is for a class selector:
#fieldset_id {
  background-color:XXXXX;
}
For a ChronoForms Fieldset you may also need to color the legend background and add a little padding
#traveller_1,  #traveller_1 legend{
  background-color: aliceblue;
  padding: 6px;
}

Bob
mo momentis 07 Jan, 2016
Oh my gosh. If only I understood CSS better!!!!

Thanks Bob!

Rick
This topic is locked and no more replies can be posted.