Colour the background of empty input fields.

In addition to this question and answer, I would like to know if it's possible to colour the background of input fields when values are empty?
3 answers

I needed the same behavior in another project and solved it this way:

  1. add an boolean that indicates whether the field is empty
  2. create a table with two rows with conditional visibility
  3. a row if empty = true, contents: a microflowtrigger which changes 'empty' to false and refreshes if clicked. Style the microflowtrigger as input box (colored background, border..).
  4. a row if empty = false: contents: the inputbox + onleave mf which might revert the empty value back to true.

Fedor, because your css doesn't know the emptyness of an input field, you need some additional js that resets the css class of an input field when it's empty. Then you can do something like:

.yourcssclass .input {

background-color: #000 !important;


So you need js to set a new css-class when the input field is empty. As far as I know you need a new input field widget for this. Basically a skilled jscripter have to reuse the input field widget and modify this one with your needs :)


No, this is currently not possible as there is no hook for the CSS to know if it is empty or not.

You would need to use javascript to check if it's empty and set a class to apply CSS styling befitting the current status.