Is there anyway to change the colour of the selection boxes within a matrix?

  • Profile Image
    metrocorephone
    Asked on November 26, 2013 at 03:57 PM

    I currently have this CSS to change the heading background but it would be nice to be able to change the inside of the selection box circles as well, but leave the background white.

    #cid_1 table tbody tr th + th {
    background: green;
    }

    #cid_1 table tbody tr th + th + th {
    background: yellow;
    }

    #cid_1 table tbody tr th + th + th + th {
    background: orange;
    }

    #cid_1 table tbody tr th + th + th + th + th {
    background: red;
    }


  • Profile Image
    jedcadorna
    Answered on November 26, 2013 at 05:51 PM

    @metrocorephone,

    Unfortunately it is not possible to change the color of the circle only the background color is possible to be edited. The work around for this is to download your form source the replace the radio button with image. I was browsing through net and found this work around guide http://stackoverflow.com/questions/17322201/replace-radio-buttons-with-images-with-css-or-pure-js-some-restrictions

  • Profile Image
    metrocorephone
    Answered on November 26, 2013 at 06:07 PM
    Thanks
    Robert Mantey
    Operations Manager
    MetroCore Facility Services Inc.
    *There are no shortcuts to any place worth going*.
    M: 780.414.0064 D: 780.328.2412 F: 780.665.7028
    ACSA Safety Certified
  • Profile Image
    ardy0689
    Answered on November 26, 2013 at 06:58 PM

    On behalf of my colleague, you are welcome, feel free to post your future concerns or issues you might have or kindly open up a new thread for unrelated topic. Thank you

  • Profile Image
    Jeanette
    Answered on November 26, 2013 at 10:37 PM

    Actually NO need to get the source code. There is a way to do this from within our form builder through Custom CSS

    Please check my form example  where I put different colors

    This is the code I've used so far

    .form-matrix-table > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(2) {

    background: #876CCC !important;

    }

    .form-matrix-table > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(3){

    background: #65CCCC !important;

    }

     

    To get this easily, use your browser's inspector. I do recommend to use Mozilla Firefox - plugin, called Firebug

    Simply point out to the element, do right-click and select Inspect Element, the name class will  show. Simply click on the arrow and select Copy Unique Selector, add the custom css, just like I did above

     

    If you want further assistance on regards to this question, let us know. Otherewise please open a new thread

  • Profile Image
    jedcadorna
    Answered on November 27, 2013 at 07:59 AM

    Hi Robert,

    I have cloned your form and downloaded the form source and made a sample of the adjustment. Like what I've mention in my previous post to make this work you have to make a customized CSS and Javascript to for this to work and you can create your own image colors of the "circles". 

     

    A sample screenshot of the changes after I have applied the custom code which can be found here. You can now see that the radio button has changed to color red.

    For detailed instruction you may refer to this article that I found online and the sample work can be accessed through this link. You may download the compressed version through this link