我有以下 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
的默认图标和布局。
并像下面这样渲染它:
最佳答案
要自定义图标,请覆盖页面上的 .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
类来覆盖组件的默认选定样式
注意覆盖上面列出的两个类将影响该页面上的所有组件。覆盖时一定要使用自定义命名空间。举个例子
.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>
关于css - 如何覆盖 p :selectOneRadio default icons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21676850/