如何设置h：selectBooleanCheckbox的边框样式？

Question

如何为<h:selectBooleanCheckbox>提供红色边框？

我尝试了如下，但边框根本没有出现。

<h:selectBooleanCheckbox style="border: 1px solid red;" />

Answer 1

尝试这个，

<h:selectBooleanCheckbox id="deleSub" style="border-color:red;" value="#mobeeCustomerHome.deleteSubscription}" />

Answer 2

JSF <h:selectBooleanCheckbox>生成HTML <input type="checkbox">元素。 HTML <input type="checkbox">元素的样式由客户端使用的特定Web浏览器严格控制。

使用border仅适用于Internet Explorer，即便如此，外观也很难看。盒子和边框之间有一些很好的填充物。要让它以您希望的方式显示在其他浏览器中，您应该使用outline代替。

<h:selectBooleanCheckbox style="outline: 1px solid red" />

请注意，这反过来在IE中无效！如果您想在所有浏览器中使用红色边框，则可能需要指定两个 CSS属性。

<h:selectBooleanCheckbox style="border: 1px solid red; outline: 1px solid red" />

请注意，这与JSF完全无关。这是一个纯HTML / CSS问题。 JSF只是一个HTML代码生成器。问题最终归结为HTML <input type="checkbox">元素的可定制性。

完全不同的替代方案是使用第三方JSF组件库，它允许对UI进行更细粒度的控制，例如PrimeFaces。另见the <p:selectBooleanCheckbox> showcase。它正在使用jQuery UI（CSS themeroller！）。

Answer 3

这与HTML复选框本身有关，而不是JSF标记。

见帖子：How to change checkbox's border style in CSS?

你可以尝试：

outline: 1px solid red;
-moz-appearance: none;

这是我认为你在FF中寻找的方式的一部分它在IE8中什么都不做（IE8中的边框也没有任何作用）。我还没有测试过任何其他浏览器。