You can use dynamic classes for that. In the validation message go to “appearance” → Dynamic classes.

Add: (if $currentObjcet/dateofbirth = (condition for it to be eligible) then ‘valid_dob’ else ‘’)

Then add a custom class “valid_dob” in your project theme folder in either a seperate scss file or into the “custom-variables.scss”

valid_dob class:

.valid_dob {

background-color: green !important;

}

Maybe you need to adjust the text color or some other things aswell but you can just add those in this class.

Hope this works!

Your message box is not a validation message. It is rather an information-message based on the value of attribute dob (date of birth). Difference is that a validation message will also prevent the user from saving data and moving on. In this case you probably want the user stopped is dob results in an age below 18 saying ‘You are not eligible to vote’ with red background. So add a text-field on your page, below the dob-input mimicking the validation message, visibility: only visible if person is eligible;

To that textbox, add a class and in customs.scss add the class and the background-color. No need for “!important”. The specific class will be enough and if it is not enough, then make your selector more specific by adding  more parent-classes.

Btw. ‘eligible for vote’: do you mean ‘allowed to vote’ or ‘eligible to get voted’?

You can override the default style of the TextBox validation message with scss.

1. Add custom import to your LayoutsModule main.scss file: @import "Widgets/custom-textBoxesValidation”
2. Define the overriding CSS in the file you just made
3. Add the Class name to your TextBox Class in Appearance tab
4. App > Synchronize App Directory + Run
5. Make 2 versions of the TextBox with each their own style and with custom visibility for Eligible TRUE and Eligible FALSE

SCSS

.validation-feedback-custom-color {

    div.mx-validation-message {
      background-color: $brand-neutral !important;
      border-color: $brand-neutral-shaded !important;
      color: $brand-font-default !important;
    }
}