<h: inputText> on / off - change the background color

Question

Is it possible to change the background color for a disabled <h:inputText> ?

I tried to do this:

 <h:inputText value="test" disabled="true" styleClass="input"/> 

css contains:

 input:disabled {background-color:blue;} input:enabled {background-color:red;} 

and the result:

The reason why I am trying to change the background is because since I set richfaces the same color is turned off and on, both are white

thanks

UPDATE:

HTML:

 <td class="width10">Směna:</td> <td class="width15"><input name="bde:j_idt100" value="2011-05-18-S2" size="13" style="background-color: blue; color: red;" disabled="disabled" type="text"><input id="bde:shift" name="bde:shift" type="hidden"></td> <td><input name="bde:j_idt102" value="ranní" class="input2" size="13" disabled="disabled" type="text"><input name="bde:j_idt103" value="admin" class="input2" size="13" disabled="disabled" type="text"></td> </tr> <tr class="rowEven"> <td class="width5"><input id="bde:f1" name="bde:f1" value="F1" tabindex="2" title="Novy pracovnik - vymaze vsechna pole formulare" class="btninput" type="submit"></td> <td class="width10">Pracovník:</td> <td class="width15"> <input id="bde:worker" name="bde:worker" class="input" size="13" tabindex="1" onblur="jsf.util.chain(this,event,'mojarra.ab(this,event,\'blur\',\'@this\',\'bde:inputName\')','mojarra.ab(this,event,\'blur\',\'@this\',\'bde:inputSname\')','mojarra.ab(this,event,\'blur\',\'@this\',\'bde:inputDep\')','mojarra.ab(this,event,\'blur\',\'@this\',\'bde:reportErr\')')" type="text"></td> 

Graphic differences between generated code and HTML:

Answer 1

The reason why I am trying to change the background is because since I set richfaces the same color is turned off and on, both are white

RichFaces comes with its basic skinning . On RichFaces 4.0, you can completely disable it in the following context options in web.xml .

This disables the standard skin stylesheets (see chapter 6.6.1 of the associated developer guide)

 <context-param> <param-name>org.richfaces.enableControlSkinning</param-name> <param-value>false</param-value> </context-param> 

This disables special skin stylesheets (see chapter 6.6.2)

 <context-param> <param-name>org.richfaces.enableControlSkinningClasses</param-name> <param-value>false</param-value> </context-param> 

If for some reason you do not want to disable basic skinning, but rather want to override certain CSS properties / properties, you need to specify these properties / properties exactly in your own CSS. Using Firebug , you can click on the element of interest and select "Check Element" to get all the specific CSS properties on the right side of the lower console.

In this particular case, input has a background-image property that points to a specific URL. You need to redefine it as follows:

 input { background-image: none; } 

Answer 2

Try with this

 <h:inputText value="test" disabled="disabled" style="background-color:blue; color:red;" />