Background color of individual text fields

Change the background color of a specific text field in ChronoForms.

Overview

In CF v5 and v6, adding custom CSS directly in the Preview section no longer works as it did in CF v4.
For CF v5, use a Load CSS action in the Setup tab. For CF v6, either use a CSS element from the Custom group in the Designer tab or add the style directly in the Additional Attributes setting of the field.

Answered
Cr CrystalFrontier 03 Aug, 2018
Dear all

Back in the days (CF4), if you wanted to change the background color of just one text field (e.g. to highlight in green the sum total of fees incurred), you just entered a custom code before said field (for orientation) in the 'Preview' section with the following content:

<style>
#fees_acc { background-color:#A9D788; }
</style>

...with fees_acc being the field ID. --> Success!

Now, in either CF 5 or 6 there is no response, and the same code actually appears on the form itself, that is until I switch to Pure Code --> Yes. But still nothing.

What am I doing wrong?

Thanks for any help on this minor luxury item,
Christopher
Gr GreyHead 03 Aug, 2018
Hi Christopher,

You can add the CSS:
+ for CFv5 in a Load CSS action in the Setup tab
+ for CFv6 in a CSS element from the Custom group in the Designer tab

Bob
Cr CrystalFrontier 06 Aug, 2018
Answer
Hello Bob
Okay, got it working:

#total {
background-color: yellow;
}

Thanks!
Christopher
he healyhatman 06 Aug, 2018
Or for CF6 just add the following to the Additional Attributes setting
style:background-color:yellow
Cr CrystalFrontier 06 Aug, 2018
Many thanks! Sadly, I can't use v6 because I'd like to export to Google Spreadsheets😉
This topic is locked and no more replies can be posted.