How to change the background color of a h:inputText control inside a rich:Panel

Question

I need to change the background color of some <h:inputText> controls inside a rich panel based on a condition. This is to distinguish these controls as readonly. I tried using styleClass and style properties but both did not work. styleClass is ignored and style colors only half of the textbox.

1) styleClass code :

In css :

.readonlycontrol
{
  background-color: #C0C0C0;
}

In .xhtml page:

<rich:panel styleClass="inputpanel">
  <f:facet name="header" >
    <h:outputText value= "#{cardreqmsg.apptinfo}"/>
  </f:facet>
  <h:panelGrid columns="4" cellpadding="2" border="0">  
  <h:inputText id ="name" styleClass="readonlycontrol" readonly="true"/>
  .........

2) style code:

<h:inputText id ="name" readonly="true" style="background-color:#C0C0C0"/>

Any help would be greatly appreciated

Answer 1

You can achieve this with CSS. Something like:

#name input[readonly] {
   background-color: #C0C0C0;
}