как переопределить р: selectOneRadio иконки по умолчанию

Question

У меня есть следующие 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> 

, порождающие это:

Что я хочу, чтобы переопределить иконки и расположение p:selectOneRadio по умолчанию , и сделать его, как показано ниже:

Answer 1

Чтобы настроить значок, переопределить .ui-radiobutton-icon на вашей странице (есть уборщик вариант включения правильно упакованный файл CSS):

<style type="text/css"> 
    .ui-radiobutton-icon{ 
     background: url(imgs/icon.png) no-repeat; !important; 
    } 
</style> 

---

EDIT: Переопределение

• .ui-state-hover класс, чтобы переопределить стиль парения по умолчанию для компонента
• .ui-state-active clasas переопределить по умолчанию выбранного стиля для компонента

Примечания переопределяя оба класса, как указано выше, будет влиять на все компонент на этой странице , Обязательно используйте собственное пространство имен при переопределении. Возьмем, к примеру

.my-custom-ns .ui-state-hover{ 
    //css 
    } 

, а затем в вашем компоненте определения:

<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>