<h:inputText> enabled/disabled - change background color

Question

can I change background color for disabled <h:inputText>?

I've tried to do this way:

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

css contains:

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

and result is:

reason, why I'm trying to change the background is, that since I've installed richfaces, disabled and enabled has the same color, both are white

Thank you

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 richfaces generated code and HTML:

Answer 1

Try with this

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

Answer 2

reason, why I'm trying to change the background is, that since I've installed richfaces, disabled and enabled has the same color, both are white

RichFaces ships with its own basic skinning. On RichFaces 4.0 you can disable it altogether by the following context parameters in web.xml.

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

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

This disables the component specific skin stylesheets (see chapter 6.6.2)

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

If you however don't want to disable the basic skinning for some reason, but rather want to override specific CSS property/properties, then you need to specify exactly those property/properties in your own CSS. Using Firebug, you can rightclick the element of interest and choose Inspect Element to get all definied CSS properties in the right hand side of the bottom console.

In this particular case, the input has a background-image property pointing to a particular URL. You need to override it like as follows:

input { 
    background-image: none;
}