What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by metrocorephone 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;
    }


    Selection colour style heading table font
  • Profile Image

    Answered by jedcadorna 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

    Answered by metrocorephone 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
    JotForm Support

    Answered by ardy0689 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
    JotForm Support Manager

    Answered by Jeanette 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

    Answered by jedcadorna 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