PrimeFaces inputs breaks Theme Roller standards

[edvinsyse]

When I install a custom Theme Roller theme created with http://jqueryui.com/themeroller/, text inputs gets the button background color. This is because PrimeFaces adds ui-state-default to the input. According to the spec, ui-state-default should only be applied to clickables. (http://learn.jquery.com/jquery-ui/theming/api/)

This seems like a bug in PrimeFaces. Is it possible to make PrimeFaces not add these classes to inputs?

I've Googled and searched this forum but can't find any mention of this, which seems weird; doesn't this bite everybody that create custom themes for PrimeFaces?

Any help would be greatly appreciated.

[Niko.pf]

Since nobody has answered I'll try. I ran into the same problem and inspecting the Primefaces themes I noticed that these define additional ".ui-inputfield" classes that override the background defined by ui-state-default. These classes are not present in the theme roller generated css. If you manually add them to the generated css file like e.g.

Code: Select all

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #d9d9d9;
    color: #222222;
}
.ui-inputfield.ui-state-hover, .ui-widget-content .ui-inputfield.ui-state-hover, .ui-widget-header .ui-inputfield.ui-state-hover {
    border: 1px solid #66b3ff;
}
.ui-inputfield.ui-state-disabled, .ui-widget-content .ui-inputfield.ui-state-disabled, .ui-widget-header .ui-inputfield.ui-state-disabled {
    background-color: #eaeaea;
}
.ui-inputfield.ui-state-focus, .ui-widget-content .ui-inputfield.ui-state-focus, .ui-widget-header .ui-inputfield.ui-state-focus {
    border: 1px solid #3399ff;
} 

you can control the appearance of your input fields. I don't know why things are done this way, but at least this works.

cheers
Niko

[Mike_M.]

Thank you, Niko. Your response was very helpful.