change background color of checkbox

[John Webster]

Does anyone know how to change the color of a checkbox?  Background color changes a square around the checkbox, but the checkbox remains white.

I try this approach, but it changes the background color around the checkbox and NOT inside the checkbox.
    public void setCheckBoxBackgroundColor(CheckBox cb) {
        Element e = DOM.getFirstChild(cb.getElement());
        DOM.setStyleAttribute(e, "background", "#FF0000");
    }

Thanks in advance.

Joster

[Martin]

Hi

afaik no major browser supports changing background of neither
checkbox nor radio.

you can create your custom checkbox component that defines custom
image for checked and unchecked state. you may inspire from my code of
tristate checkbox:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FocusWidget;
import com.google.gwt.user.client.ui.Widget;

/**
* Checkbox with three states (checked, unchecked and undefined).
*
* @author martin
*/
public class TristateCheckBox extends FocusWidget implements
HasBooleanState, HasValue {

private static final String UNCHECKED_IMG = "img/tristate-
unchecked.png";

private static final String UNKNOWN_IMG = "img/tristate-unknown.png";

private static final String CHECKED_IMG = "img/tristate-checked.png";

private final Element buttonElement = DOM.createElement("input"); //
TODO: prevent form submission;

private String value;


public TristateCheckBox() {
DOM.setElementProperty(buttonElement, "type", "image");
setElement(buttonElement);
setStyleName("gfr-TristateCheckbox");
DOM.setElementAttribute(buttonElement, "src", UNCHECKED_IMG);

addClickListener(new ClickListener() {

public void onClick(final Widget sender) {
final String img = DOM.getElementAttribute(buttonElement, "src");
String newImg;
if (img.endsWith(UNCHECKED_IMG)) {
newImg = CHECKED_IMG;
} else if (img.endsWith(UNKNOWN_IMG)) {
newImg = UNCHECKED_IMG;
} else if (img.endsWith(CHECKED_IMG)) {
newImg = UNKNOWN_IMG;
} else {
throw new IllegalArgumentException("unknown checkbox state");
}

DOM.setElementAttribute(buttonElement, "src", newImg);
}

});
}


public void setState(final Boolean state) {
DOM.setElementAttribute(buttonElement, "src", state == null ?
UNKNOWN_IMG : state.booleanValue() ? CHECKED_IMG : UNCHECKED_IMG);
}


public Boolean getState() {
final String img = DOM.getElementAttribute(buttonElement, "src");
if (img.endsWith(UNCHECKED_IMG)) {
return Boolean.FALSE;
} else if (img.endsWith(UNKNOWN_IMG)) {
return null;
} else if (img.endsWith(CHECKED_IMG)) {
return Boolean.TRUE;
} else {
throw new IllegalArgumentException("unknown checkbox state");
}
}


public String getValue() {
return value;
}


public void setValue(final String value) {
this.value = value;
}

}

[joster]

(CC'ing Contributors group - perhaps someone knows how to do this)

Thanks Martin. I want different background color for different check
boxes. For example, I have 3 check boxes in my UI:
checkbox-1 : background color: red
checkbox-2 : background color: green
checkbox-3 : background color: yellow
and so on ....

I can have many more checkboxes each with distinct background color.
How can I control this? Would be great to do this via a CSS and or
within Java code (DOM.setStyleAttribute(e, "background", "#FF0000");

Joster