how to override p:selectOneRadio default icons - css

Question

I have the following p:selectOneRadio :
<p:outputPanel id="customPanel">
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>
</p:outputPanel>
which generate this :
What i want is to override the default icons and layout of p:selectOneRadio.
and render it like below:

Answer 1

To customize the icon, override the .ui-radiobutton-icon on your page (there is a cleaner option of including a properly packaged css file):
<style type="text/css">
.ui-radiobutton-icon{
background: url(imgs/icon.png) no-repeat; !important;
}
</style>
EDIT: Override the
.ui-state-hover class to override the default hover style for the component
.ui-state-active clasas to override the default selected style for the component
Note overriding both classes as listed above will affect all the components on that page. Be sure to use a custom namespace when overriding. Take for example
.my-custom-ns .ui-state-hover{
//css
}
And then in your component definition:
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" styleClass="my-custom-ns" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>