orbeon

Orbeon Forms: Setting Background Colour on Focus


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:

Many thanks in advance

PeteA


Solution

  • 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.