Changing color of checkbox itself

Home Forums Requests Changing color of checkbox itself

  • This topic has 6 replies, 2 voices, and was last updated 3 weeks ago by Rad.
Viewing 6 reply threads
  • Author
    Posts
    • #38255
      Rad
      Participant

        Hi Alex, I’ve a a multiselect checkbox field and would like to change the background color of the checkbox itself to white instead of default gray. Anyway to achieve this? thanks

      • #38258
        Alexander Bautz
        Keymaster

          You can add this to your Custom CSS:

          .spjs-form-choice-wrap .spjs_chk_checkmark,
          .spjs_radio_wrap .spjs_radio_checkmark {
              background-color: white;
          }
          
          .spjs_chk_wrap input:checked~.spjs_chk_checkmark,
          .spjs_radio_wrap input:checked~.spjs_radio_checkmark {
              background-color: gray;
          }
          

          Alexander

        • #38263
          Rad
          Participant

            I copied the code as is to my CSS file and checkboxes look same. The default checkbox color should be same color as the Explain textbox when editing.

          • #38266
            Alexander Bautz
            Keymaster

              I’m wondering if you have pasted the code in the correct place – can you show me a screenshot of your Custom CSS?

              Alexander

            • #38267
              Rad
              Participant

                I placed it withing my CSS file which is called from within custom CSS tab.

              • #38270
                Alexander Bautz
                Keymaster

                  To ease the troubleshooting, can you add the CSS to the Custom CSS area directly?

                  Alternatively, try adding !important to the style properties like this:

                  .spjs-form-choice-wrap .spjs_chk_checkmark,
                  .spjs_radio_wrap .spjs_radio_checkmark {
                      background-color: white!important;
                  }
                  
                  .spjs_chk_wrap input:checked~.spjs_chk_checkmark,
                  .spjs_radio_wrap input:checked~.spjs_radio_checkmark {
                      background-color: gray!important;
                  }
                  

                  Alexander

                • #38271
                  Rad
                  Participant

                    !important did the trick. thank you!

                Viewing 6 reply threads
                • You must be logged in to reply to this topic.