如何设置 h:selectBooleanCheckbox 的边框样式？答案

【问题标题】：How to style the border of a h:selectBooleanCheckbox?如何设置 h:selectBooleanCheckbox 的边框样式？
【发布时间】：2012-08-09 10:26:04
【问题描述】：

如何给<h:selectBooleanCheckbox> 加上红色边框？

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

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

【问题讨论】：

标签： html css jsf

【解决方案1】：

试试这个，

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

【讨论】：

【解决方案2】：

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

使用border 只能在 Internet Explorer 中使用，即使这样，外观也很丑陋。盒子和边框之间有一些很好的填充。要让它在其他浏览器中以您想要的方式显示，您应该改用outline。

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

请注意，这反过来在 IE 中不起作用！如果您希望在所有浏览器中都有一个红色边框，您可能需要指定 both CSS 属性。

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

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

一个完全不同的选择是使用第 3 方 JSF 组件库，它允许对 UI 进行更细粒度的控制，例如 PrimeFaces。另见the <p:selectBooleanCheckbox> showcase。它在幕后使用jQuery UI（带有CSS themeroller！）。

【讨论】：

【解决方案3】：

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

你可以试试：

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

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

【讨论】：