Change color of cells in a matrix

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.

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

Hi knp, 

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

Thanks for your positive feedback

Regards.