如何设置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会生成一个HTML <input type="checkbox">元素。HTML元素的样式由客户端使用的特定<input type="checkbox">浏览器严格控制。

使用border只能在in浏览器中工作，即使这样，它的外观也很丑陋。盒子和边框之间有一些很好的填充物。要让它在其他浏览器中以您想要的方式显示，您应该改用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 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中也不做任何事情)。我还没有测试过任何其他浏览器。