how can I greyout a disabled field?

Question

Might not be a JSF issue but JSF experts would know this possibly more
I have some fields on the form that are getting enabled disabled based on some ajax requests . I want to show them greyed out when disabled.

Let me know you need to see code but just using simple

<f:ajax event="keydown" execute="@this" render="field1 field2" />

field 1 the has

disabled="#{not empty someBean.someProperty}"

CSS is

#content input .disabled {color: #DCDAD1; padding: 2px; margin: 0 0 0 0;background-image=""}

Disabling itself is working fine but not getting greyed out

Thanks and applogies if JSF tag is not correct tag

Answer 1

The JSF input component's disabled attribute doesn't emit a style class like class="disabled" or something like as your CSS declaration seems to expect. It just sets the HTML-standard disabled attribute on the generated HTML element. To see it with your own eyes, open the JSF page in your favourite browser, rightclick and View Source. It'll look something like

<input type="text" disabled="disabled" />

You need to use the CSS attribute selector element[attrname]. If the attribute with attrname is present on the element, then the style will be applied.

#content input[disabled] {
    color: #DCDAD1;
    padding: 2px;
    margin: 0 0 0 0;
    background-image: none;
}

(please note that I fixed the background-image declaration as well as it was invalid)