html - ah:selectBooleanCheckbox の境界線をスタイルする方法は?

Question

どうすれば<h:selectBooleanCheckbox>赤い枠を付けることができますか?

以下のようにしてみましたが、枠が全く出ません。

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

Answer 1

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 コード生成プログラムです。<input type="checkbox">この問題は、最終的には HTML要素のスタイル機能に行き着きます。

まったく別の代替手段は、 PrimeFacesなどの UI をより細かく制御できるサードパーティの JSF コンポーネント ライブラリを使用することです。ショーケースもご覧ください。<p:selectBooleanCheckbox>カバーの下でjQuery UI ( CSS テーマローラー付き!) を使用しています。

Answer 2

これは、JSF タグではなく、HTML チェックボックス自体に原因があります。

投稿を参照してください: CSS でチェックボックスの境界線のスタイルを変更する方法は?

あなたは試すことができます：

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

これは、IE8では何もしないFFで探していると思う方法の一部になります（borderはIE8でも何もしません）。他のブラウザはテストしていません。

Answer 3

これを試してください、

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