applying css styles to command button

[wingman]

hi applied css style to  <h:commandButton but here the button doesn't show properly

<h:form>

                                                                                <h:panelGrid columns="2">

                                                                                                    <h:outputLabel value="Username" for="username" />

                                                                                                    <h:inputText class="default-value" value="#{sampleTableMBean.username}" id="username1" style="width:155px;font-size: 12px;" />

                                                                                                    <h:outputLabel value="Password" for="password" />

                                                                                                    <h:inputText class="default-value" id="password1" value="#{sampleTableMBean.password}" style="width:155px;font-size: 12px;"/>

                                                                                          </h:panelGrid>

                                                                                           <h:commandButton  value="Log in" action="#{sampleTableMBean.loginUsers}" style="background-color: red;height:20px; font-size: 12px;" />

                                                                                                    </h:form>

here is the sample

please can anyone help me out in this...to show complete button properly with the appllied style

[healeyb]

[edit - various typos now corrected]

you must have some other css that's being applied to the commandButton. Don't forget that it's an html input, so if

you want css to apply only to an inputText you need to use:

input[type="text"], input[type="password"] {

...

}

and

input[type="submit"], input[type="reset"], input[type="button"] {

...

}

for a h:commandButton. I've seen this specific problem before with a commandButton getting half a background

- hmmm what was it now... you don't have a background image on any other input components perhaps?

Hang on, it's because you've got richfaces styling enabled. I use this in web.xml to have normal styling:

<context-param>

        <param-name>org.richfaces.enableControlSkinning</param-name>

        <param-value>false</param-value>

</context-param>

Because you are using the richfaces styling background-image, background-position and background-repeat

are applied from skinning.css, guess you just need to override these.

This jquery will totally unstyle h:inputText id="input1", I had to unbind the javascript events but I can't remember

if this was for primefaces or richfaces, so the unbind line may not be needed.

jQuery(function($) {

     $('#input1').removeClass();

     $('#input1').unbind("mouseenter focus mouseleave");

});

Regards,

Brendan.