Check box colour

  • Profile Image
    mgcaledonian13
    Asked on August 02, 2017 at 01:17 AM

    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

  • Profile Image
    Charlie
    Answered on August 02, 2017 at 04:22 AM

    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.

  • Profile Image
    mgcaledonian13
    Answered on August 03, 2017 at 12:16 PM

    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.

  • Profile Image
    david
    Answered on August 03, 2017 at 02:03 PM

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

  • Profile Image
    david
    Answered on August 03, 2017 at 02:25 PM

    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.

     

  • Profile Image
    mgcaledonian13
    Answered on August 03, 2017 at 04:43 PM

    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

  • Profile Image
    david
    Answered on August 03, 2017 at 06:18 PM

    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.

  • Profile Image
    mgcaledonian13
    Answered on August 04, 2017 at 06:07 PM

    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

     

  • Profile Image
    BDAVID
    Answered on August 04, 2017 at 07:46 PM

    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.

  • Profile Image
    mgcaledonian13
    Answered on August 05, 2017 at 01:49 AM

    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