如何設置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中也沒有作用）。 我還沒有測試其他瀏覽器。