如何设置ah：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 。 另请参见<p:selectBooleanCheckbox>展示柜 。 幕后使用jQuery UI （带有CSS themeroller ！）。

Answer 3

这更多是由于HTML复选框本身而不是JSF标记。

请参阅文章： 如何在CSS中更改复选框的边框样式？

您可以尝试：

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

这是我认为您在FF中寻找它的一部分，它在IE8中没有任何作用（边界在IE8中也没有作用）。 我还没有测试其他浏览器。