如何覆盖 p:selectOneRadio 默认图标答案

【问题标题】：how to override p:selectOneRadio default icons如何覆盖 p:selectOneRadio 默认图标
【发布时间】：2014-02-10 12:09:21
【问题描述】：

我有以下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 的默认图标和布局。并将其渲染如下：

【问题讨论】：

只有一点 <center> 在 HTML 中已被弃用，不应再使用。 stackoverflow.com/questions/1798817/…

标签： css jsf primefaces overriding jsf-2.2

【解决方案1】：

要自定义图标，请覆盖页面上的 .ui-radiobutton-icon（有一个更简洁的选项，包括正确打包的 css 文件）：

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

编辑：覆盖

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

【讨论】：

选中后，悬停如何？