Check box colour

How Can I make the check box change colour when selected, that is as soon it is clicked make it go from white to blue.

Willy Scott

May we know what form you are working on? You can change the color and styling of the check boxes or radio buttons using the Form Designer Tool.

Below is a screenshot of how to edit it:

1. Select the check box/radio button field.

2. The settings will display at the right side.

3. From there, you can change the style and the color of the check box.

Now really sure what you meant by from "white" to "blue". The check box has two parts, the box itself and the check. What behavior you would like to see? The option I presented above will allow you to change the design of the check box and the color of it. Please do try.

Hi there

You managed to get the correct Form.

Yes that works OK for the colour of the Tick but there no way that I can see that changes any of the other elements, for example the colour of the Box. Please see image to understand what I am trying to achieve.

This may not be possible but I have been proved wrong before!! 

See images below.

I seem to be able to change everything except for the checkbox background.  One moment while I find the correct CSS.

Checkbox background color when not selected add the following code:

.form-checkbox-item:not(#foo) label:before {

    background-color: blue;

}

I will see if I can find the code to set it for only when it is checked.

Yea that works OK but I used the colour #74BFFF but that is just an easy change and is not what what I was aiming for.

I wanted the Check box to change on mouse over (In focus I think that is the terminology) and stay blue when selected with the Tick mark in a different colour.

Willy Scott

I am not sure about the hover color, but the checkbox when selected color can be changed with the following CSS:

input[type="checkbox"]:checked + label::before{
  background : green !important;
}

Adjust the color to suit your needs.

We are getting there!

I found this on the Web,

#ck-button label:hover #all + span {
  background-color:#efE0E0;
}

Using your CSS  I tried adapting it to give the Hover Colour, I removed "#all :span" 

input[type="checkbox"]:checked + label::hover #all + span{
 background : white !important;
}

Needless to say it does not work any ideas ?

Willy Scott

You can use the following code for the hover:

.form-checkbox-item:not(#foo):hover label:before {

    background-color: blue;

}

Let us know if you need more help.

Thanks a lot that worked fine.

I clearly got away wrong, I try to solve the problem before I contact you guys but in this case it was a "fail".

Willy Scott