PrimeFaces how to reset background color - css

Question

I have a reset button on my xhtml and basically when the field is empty it will prompt a message and the field background will turn to red.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<div id="cId" class="panel-body-width panel-input-body-width">
<div>
<div id="snDIV" class="row row-in-fieldset-div">
<div class="col-md-4">
<p:outputLabel id="myLabel" value="myNumber" />
</div>
<div class="col-semicolon col-md-1">
<p:outputLabel value=":" />
</div>
<div class="col-md-3 row-in-fieldset-cp">
<p:inputText id="myNumber"
value="#{userBean.myNumberInput}"
required="#{userBean.isRequired}"
requiredMessage="Input should not be empty" >
<p:ajax event="blur" update="myNumber myNumberMsg" />
</p:inputText>
</div>
</div>
<div class="col-md-3 row-in-fieldset-msg">
<p:message id="myNumberMsg" for="myNumber" />
</div>
</div>
</div>
</div>
<br />
<div class="panel-footer">
<p:commandButton id="reset" value="Reset"
actionListener="#{userBean.reset}" process="#this"
update="myNumber myNumberMsg" >
</p:commandButton>
</div>
</ui:composition>
Problem is, once i hit reset, the value does change to default and the error message disappears but the background color of the field is still red and does not change back to white. Anyone has an idea as to why?
I did try using the update=":form" but doesn't seem to work and my page won't load.

Answer 1

You should take a look at the resetInput component: http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml