Hi guys,

I'm having some troubles integrating CSS code with Javascript functions.

I'm trying to draw a plain checkbox with gray borders, when not checked. When the user checks it, I want the box to become blue, as well as the check icon.  (Something like this)
Am I wrong in concluding that the only way to do this is by comunication between the CSS and JavaScript? Is it possible to do?

Thanks for any help.

Miguel -

Two choices:

1. Put some JavaScript/jQuery to check the CSS based on the SELECTED attribute of the checkbox.
2. Put a "style" Extended Property on the checkbox with a value something like: if(Form.Record.Entity.Attribute, "color: blue;", "color: liliac;") or whatever CSS works, then add an "OnChange" chander to the checkbox that calls AjaxRefresh on the checkbox.


I think you only need CSS and some images to achieve this.

You need a container and inside that container a checkbox and a label
Set the Style property of the container to CheckBox
Set the Input Widget property of the label to the Name of the CheckBox
Put the Label to the right of the check box and set it's value to a blank i.e. ""

Here's the CSS. Note that we are storing the images that look like a checked check box and an unchecked check box in a sprite . you have to replace the background with your own images

/*hide all the check boxes within a div that has class CheckBox*/
.CheckBox input[type=checkbox] { display: none !important; }

/* style the label that's displayed instead of the ckeck box to look like a checkbox*/
.CheckBox input[type=checkbox] + span + label { cursor: pointer; padding-left: 25px; padding-right: 3x; padding-top: 3px; padding-bottom: 3px; background-repeat: no-repeat; display: inline-block; background: url("/GlobalTheme/img/Form_icons.png") no-repeat 0 -520px; height: 22px; }

/* show the checkbox image when check box is checked*/ .CheckBox input[type=checkbox]:checked + span + label { background: url("/GlobalTheme/img/Form_icons.png") no-repeat 0 -440px; }


Thank you for your answers. Both were very helpful.

With some adjustments to Fabian CSS, I believe it's the best way to achieve what I want for now.