css - 去掉 p :selectManyCheckBox 周围的边框

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