Hello @bernard57
Thank you very much for using our plugin. A field has multiple components, the label, the input box, the instructions for users, the div and span tags that contain those elements, etc.
When you enter a class name through the “Add CSS Layout Keywords” attribute, it is applied to the DIV tag that contains the field’s components.
So, assuming you enter the class my-field through the “Add CSS Layout Keywords” attribute in the calculated field (through the attribute, you enter only the class names, but you define the styles via the “Customize Form Design” attribute in the “Form Settings” tab) but want to modify the background color of its input tag (to green) and its text color (to white).
In this hypothetical example, you can enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab ):
.my-field input{background: green !important; color: white !important;}Note I used the !important; modifier with the CSS rules to increase its precedence.
Best regards.