Skip to main content
Question

CSS code for mandatory fields set by the layout

  • October 21, 2026
  • 1 reply
  • 19 views
Sidekick
Forum|alt.badge.img+14

We’ve put the mandatory fields lightblue in de css custom style sheet.
However, this css code does not effect the mandatory setting from the layout.
So if we set a field mandatory in the layout it’s not highlighted in light blue.

There is this really small light red arrow in the label, but users oversee this small red star.

Is there a css change which effects the mandatory fields set by the layout as well.
We want to have ALL mandatory fields light blue en not just a part of it.
 

1 reply

Moderator
Forum|alt.badge.img+2

Hi,

You’re right. In the current version, the mandatory CSS class is only added for fields that are mandatory in the model, not for fields made mandatory by the layout procedure. What both cases do have in common is the field label: it always gets the class Mui-required (that’s the class that shows the red asterisk).

So if you select on the label, you catch every mandatory field, whatever made it mandatory. Replace your current rule with something like this:

/* All mandatory fields: set in the model or by the layout procedure */[data-form="control"]:has(.Mui-required) .MuiInputBase-root {  background-color: lightblue;}

If your current rule styles a different inner element, keep that part and only replace .mandatory with [data-form="control"]:has(.Mui-required).

This uses the CSS :has() selector, which all current browsers (Chrome, Edge, Firefox, Safari) support. The highlight only shows while the record is in edit mode, the same as the asterisk.

 

Sebastiaan

Terms & ConditionsAccessibility statement