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

    Change color of cells in a matrix

    Asked by knp on May 19, 2015 at 10:05 PM
    Screenshot
    find solution custom CSS
  • Profile Image
    JotForm Support

    Answered by Boris on May 20, 2015 at 03:33 AM

    Hello knp.

    I'm afraid I am not entirely sure which cells you want to change, and inot what color you would like to change them

    You can inject the following custom CSS into your form to change the appearance of the cells of that matrix:

    #cid_56 tr:nth-of-type(2) > td:nth-of-type(1),
    #cid_56 tr:nth-of-type(3) > td:nth-of-type(2),
    #cid_56 tr:nth-of-type(4) > td:nth-of-type(3),
    #cid_56 tr:nth-of-type(5) > td:nth-of-type(4),
    #cid_56 tr:nth-of-type(6) > td:nth-of-type(5),
    #cid_56 tr:nth-of-type(7) > td:nth-of-type(6)
    { background: #ccc; }

    #cid_56 tr:nth-of-type(2) > td:nth-of-type(1) > input,
    #cid_56 tr:nth-of-type(3) > td:nth-of-type(2) > input,
    #cid_56 tr:nth-of-type(4) > td:nth-of-type(3) > input,
    #cid_56 tr:nth-of-type(5) > td:nth-of-type(4) > input,
    #cid_56 tr:nth-of-type(6) > td:nth-of-type(5) > input,
    #cid_56 tr:nth-of-type(7) > td:nth-of-type(6) > input
    { color: #09f; }

    You can also add it by going into the Designer, and pasting the code in the textbox under the CSS tab.

    The first block changes the background color of these cells in the matrix.

    The second block changes the text color of input fields in this matrix.

    If this is what you are looking for, please note that you can change the number in tr:nth-of-type(2)  to select a different row in the table, but as the header row is row number 1, you need to start counting rows with 2. So tr:nth-of-type(2) is the first input-able row in your matrix.

    Similarly, you can change the number in td:nth-of-type(6) to select which column you would like to select. Here, you would start with number one for the first input-able cell.

    Please try it out and let us know how it goes.

  • Profile Image

    Answered by knp on May 21, 2015 at 12:02 AM

    Thanks Boris for your timely help. Jotform team is doing nice job which is very much useful for researchers. Keep it up.

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 21, 2015 at 01:05 AM

    Hi knp, 

    On behalf of my colleague, Boris, you are welcome.

    Thanks for your positive feedback

     

    Regards.