去掉p:selectManyCheckBox周围的边框

Question

我正在尝试实现以下外观：http://www.primefaces.org/showcase/ui/selectManyCheckbox.jsf

请注意，在PrimeFaces showcase站点的组件周围没有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=“边框样式:无；”，即

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