Question

我正在尝试实施以下内容：http://www.primefaces.org/showcase/ui/selectManyCheckbox.jsf

请注意，PrimeFaces展示网站上的组件周围没有css边框。

 <h:outputText value="Horizontal: " />  
 <p:selectManyCheckbox value="#{formBean.selectedOptions}">  
   <f:selectItem itemLabel="Option 1" itemValue="Option 1" />  
   <f:selectItem itemLabel="Option 2" itemValue="Option 2" />  
   <f:selectItem itemLabel="Option 3" itemValue="Option 3" />  
 </p:selectManyCheckbox>

但是，在我的实现中，我在组件周围出现了不需要的边框。我试图添加style =“border-style：none;”即

<p:selectManyCheckbox value="#{formBean.selectedOptions}" style="border-style: none;">

没有任何结果。我有一个default.css文件根据：

.ui-widget, .ui-widget .ui-widget {
    font-size: 80% !important;
}

我不认为css资源会对此问题产生任何影响，但我可能错了。

我看不出不同浏览器之间的外观有什么不同。

你能否告诉我为什么我有边界以及如何摆脱它们，只有在这个特定的组件？

祝你好运

Answer 1

边框？ Primefaces p:selectManyCheckbox默认没有边框。

无论如何，如果要覆盖任何样式规则，可以使用!important。

这应删除任何边框：

<p:selectManyCheckbox value="#{formBean.selectedOptions}" style="border-style: none !important;">

Answer 2

我不同意没有国界。我尝试删除所有的CSS，但我仍然有边框。可能是主题特定的。

我必须使用以下内容：

.noBorder tr,.noBorder td {
    border: none !important;
}



<p:selectManyCheckbox value="#{formBean.selectedOptions}" styleClass="noBorder">
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    </p:selectManyCheckbox>

摆脱p：selectManyCheckBox周围的边框

2 个答案: