Field Custom CSS

Support
1

Hello,

How do we customize the CSS of a field? For example if we want to give it a shadow, different background color, different outline etc.

Also if I want to give my page a different background color.

Thanks

2

Also to expand a bit on my original post, how do we modify the CSS of buttons, checkbox sets, calendar fields, etc

3

This is a great question.

There are about three or four ways to do this. ( but try not to make things too ugly :wink: )

// PURE CSS 
// in CSS area
// you can target anything  with css 
.my-blue {
    background-color; #00FFFF;
}

// in element schema makes aqua blue bg
{
  "inputType": "text",
  "label": "My Input",
  "model": "field1",
  "styleClasses": "col-md-3 my-blue",
  "type": "input"
}

// USING TW
// in element schema
{
  "inputType": "text",
  "label": "My Input",
  "model": "field1",
  "styleClasses": "col-md-3 bg-blue-200",
  "type": "input"
}

// TARGETING LABEL AND FIELD
// And you can also target the parts of most elements like labels and fields too 
// showing both the above techniques
{
  "inputType": "text",
  "label": "My Input",
  "model": "field1",
  "labelClasses" : "my-blue",
  "fieldClasses" : "bg-blue-200"
  "styleClasses": "col-md-3 my-blue",
  "type": "input"
}

HTH