StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The JSF <code><h:selectBooleanCheckbox></code> generates a HTML <code><input type="checkbox"></code> element. The style of the HTML <code><input type="checkbox"></code> element is very strictly controlled by the specific webbrowser used by the client.</p> <p>Using <code>border</code> works in Internet Explorer only and even then the appearance is ugly. There's some good padding between the box and the border. To get it to appear the way you want in other browsers you should be using <code>outline</code> instead.</p> <pre class="lang-html prettyprint-override"><code><h:selectBooleanCheckbox style="outline: 1px solid red" /> </code></pre> <p>Note that this does in turn not work in IE! You'd likely want to specify the <em>both</em> CSS properties if you want to have a red border across all browsers.</p> <pre class="lang-html prettyprint-override"><code><h:selectBooleanCheckbox style="border: 1px solid red; outline: 1px solid red" /> </code></pre> <p>Please note that this is completely unrelated to JSF. It's a pure HTML/CSS matter. JSF is merely a HTML code generator. The problem ultimately boils down to the styleability of a HTML <code><input type="checkbox"></code> element.</p> <p>A completely different alternative is to go for a 3rd party JSF component library which allows more fine grained control over the UI, such as <a href="http://www.primefaces.org" rel="nofollow">PrimeFaces</a>. See also <a href="http://www.primefaces.org/showcase/ui/selectBooleanCheckbox.jsf" rel="nofollow">the <code><p:selectBooleanCheckbox></code> showcase</a>. It's using <a href="http://jqueryui.com/" rel="nofollow">jQuery UI</a> (with <a href="http://jqueryui.com/themeroller/" rel="nofollow">CSS themeroller</a>!) under the covers.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload