Element state modifier
An element state is a modifier that can be put on a style to affect when the
style is applied. The syntax is StyleName:State(AnyParameters); for example, ipf-backgroundcolor:hover(#FFCC80).
Using a state modifier on a style makes the style take effect only when the state is fulfilled. For example, in the case of hover, the user must be hovering over the element.
Note: If both a style context modifier and an element
state modifier are used, then the style context modifier has to be listed
first.
The currently supported element states are:
- Active: When the element is clicked.
- Focus: When the element has focus.
- Hover: When the element is hovered over.
Examples:
ipf-backgroundcolor@content:hover(#FFCC80) on the
password text boxes.
Not hovering:
Hovering:
ipf-backgroundcolor@content:focus(#000000) and
ipf-color@content:focus(#FFFFFF) on the password text boxes.
Not in focus:
In focus:
