The input widgets should have read-only style "Text". Then your added styling works
Additionally, I do not advise using inline styling. Better to use the existing classes.
In this case:
It depends on your CSS skills because all can be done in CSS alone. For the simpel sollution I would use the show by condition widget to show or hide the right text box where one you give the custom style color: red;.
Assuming that you store the value as integer or decimal in a separate attribute.
You can put a condition for visibility (based on expression) on your text-box. Your exprsession will be $currentObject/value < 0. Put css on your textbox (color: red;), direct or via a class.
Place the same text-box attribute again in your page, also with condition for visibility (based on expression), but now with expression $currentObject/value >= 0. Put css on this textbox (color: black;), direct or via class.
Hope this helps.
You could create two containers with a text box in it, each with the same attribute. Use the visibility settings to decide when to display the first and when to display the second container. Each container and text box can then be styled according to the requirements.
Thanks for all your suggestion - it sounds like my on the right path but for some reason I'm not doing it properly.
I have two text boxes:
Both with visibility conditions - here is the one I wish to show red when negative values are present:
However it doesn't work?
Performing an inspect in chrome there are stylings that take priority:
here is my styling further down the list:
Its on the input widget - which is non-editable if that makes a difference?