Change the color of all checkboxes in the "Select all" widget

  • Profile Image
    viciousbuzz
    Asked on February 17, 2021 at 07:40 PM

    is there any way we can change the color of the select all boxes with CSS?

  • Profile Image
    BDAVID
    Answered on February 17, 2021 at 07:44 PM

    Do you want to change the color of the "Select all" label? This is possible, please inject this code:

    [for="selectall"]{
    color: blue;
    }

    Example:

    1613609046_602db856c824a_selectall.png

    Let us know if you need more help.

  • Profile Image
    viciousbuzz
    Answered on February 17, 2021 at 10:23 PM

    This was helpful. How do I change the color of the boxes when selected to black and the checkmark to green?

    Thanks in advance!

  • Profile Image
    Fernand
    Answered on February 18, 2021 at 03:06 AM

    Hello viciousbuzz,

    Please give us a bit more time to check if we can do it.

    Thanks for your patience.


  • Profile Image
    BDAVID
    Answered on February 18, 2021 at 09:48 AM

    Good day, please try injecting the following CSS code inside the widget CSS area: https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets

    input[type="checkbox"]:checked:before {
      content: '✔' !important;
      font-size: 11px !important;
      font-weight: bold !important;
      position: relative !important;
      top: -3px;
      left: 0px;
      line-height: 18px;
      color: #43f414;
      height: 10px !important;
      width: 10px;
      background: black;
      padding: 0 2px;
    }

    Result: https://form.jotform.com/210477990660967

    1613659637_602e7df5eeda1_result.gif

  • Profile Image
    viciousbuzz
    Answered on February 18, 2021 at 11:23 AM

    I was trying to figure this out all week on my own! Thanks @BDAVID :) :)

  • Profile Image
    BDAVID
    Answered on February 18, 2021 at 01:05 PM

    You are welcome! :-)