Change de border color on a Text Box Widget

I tried to change the border color on a text box in its properties , specifically in dynamic classes, because I want the color to change depending on the value of an attribute. For example, if <condition> = 90 then ‘form-input-border-success’, I tried with that expression but it didn’t work.   Do you know how I can achieve this?
1 answers

Did you add form-input-border-success as a custom class? It does not exist out-of-the-box, so you would need to define it.

If the class is not defined yet, you should first define the form-input-border-success class in your CSS. To do this, you can add the following code to your CSS file or style block:


.form-input-border-success {
  border-color: #desired-color;


After defining the class, you should apply it to the text box to see whether it works correctly. You can manually add the class to the text box to test it before applying dynamic classes. If the border color changes as expected, it means the class is working correctly.

Next, you can move on to using dynamic classes to change the border color based on the value of the attribute. Ensure that your code for dynamic classes is correctly implemented. If it's not working, there might be an issue with the expression you used.


To debug and see whether the class is being applied and the CSS rules are working, you can use your browser's inspect window. Right-click on the text box and select "Inspect". In the Developer Tools window, find your text box's element in the HTML hierarchy. On the right-hand side, you should see a panel with the element's styles. Look for the form-input-border-success class and check if the border-color property is applied correctly. If it's not, inspect the CSS rules and ensure they are targeting the right element.