How to style the border of a h:selectBooleanCheckbox?

Question

How can I give the <h:selectBooleanCheckbox> a red border?

I tried it as follows, but the border doesn't appear at all.

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

Answer 1

try this one ,

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

Answer 2

The JSF <h:selectBooleanCheckbox> generates a HTML <input type="checkbox"> element. The style of the HTML <input type="checkbox"> element is very strictly controlled by the specific webbrowser used by the client.

Using border 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 outline instead.

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

Note that this does in turn not work in IE! You'd likely want to specify the both CSS properties if you want to have a red border across all browsers.

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

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 <input type="checkbox"> element.

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 PrimeFaces. See also the <p:selectBooleanCheckbox> showcase. It's using jQuery UI (with CSS themeroller!) under the covers.

Answer 3

This has more the to due with the HTML checkbox itself rather than the JSF tag.

See post: How to change checkbox's border style in CSS?

You could try:

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

This gets part of the way I think your looking for in FF it does nothing in IE8 (border does nothing in IE8 either). I haven't tested any other browsers.