html - 如何设置 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">由客户端使用的特定网络浏览器非常严格地控制。

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">元素的样式性。

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

Answer 3

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

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

你可以试试：

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

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