Orbeon Forms: Setting Background Colour on Focus

Question

We know we can set the background colour on an Text and Plain Text fields via the following CSS style code:

.xforms-input input:focus {color: black !important; background-color: blue !important; }  
.xforms-textarea textarea:focus {color: black !important; background-color: pink !important; } 

But how do we do the same for:

• Number fields
• Formatted text area
• Currency fields

Many thanks in advance

PeteA

Answer 1

The following adds the cases of the currency, number, and formatted text area controls to your CSS.

.xforms-input    input:focus,
.xforms-textarea textarea:focus,
.xbl-fr-currency input:focus,
.xbl-fr-number   input:focus,
.xbl-html-input.mce-edit-focus
    {color: black !important; background-color: pink !important; } 

PS: I highly recommend using your browser's Dev Tools to find about those classes, and experiment "live" with CSS.