How do I color the selected cell of a Matrix ?

Hi, 

I like the multiselect grid widget where the selection is highlighted in a grey color. However, since it allows multiple values to be selected, i opted to use Matrix - radio button instead. 

Is there a css code to color the cell of the Matrix once the radio button is selected? 

Thanks

he cell

I see that you've injected the CSS code below which is not working properly:

li.form-line.form-line-active {

    background-color : lightyellow;

    transition-duration : 0.3s;

    transition-property : all;

    transition-timing-function : ease;

}

li.form-line.form-line-active .form-matrix-table tr > th:first-child {

    padding-left : 10px;

}

li.form-line.form-line-active .form-matrix-table th {

    font-size : 14px;

}

I will find a solution for changing the background color of selected field and get back to you soon.

Hello again;

Unfortunately, it's not possible to select a parent element based on the status of a child element. The only way is adding the CSS code below while it is active:

.form-matrix-values:active{

background: red!important}

Alternatively, you can change the code with hover effect as you see below:

.form-matrix-values:hover{

background: red!important}

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

Thank you very much! The second script is exactly what I was looking for.

Unfortunately, the first script is not working ( its good to have but I am okay if it doesn't work)

.form-matrix-values:active{

background: red!important}

The .form-matrix-values:active{background: red!important} code should work, however, it will only work when the cell is clicked using the mouse. Once the click is released, then the background will be back to normal.

The effect is not noticeable due to the hover effect that was added using the second code, but if we temporarily remove the second code, you will notice the effect of the first code. Please see the demo below where I have temporarily removed the second code:

If you simply want the hover effect on your matrix, then you can keep the second code on your form and remove the first one.

Feel free to contact us again if you need further assistance.
Regards.

Thanks for the clarification! Excellent codes. I preferred the second hover version and will fix according to your advice.

Btw, is there a way to maintain the red color in the cell after the click?

Thanks

You are most welcome. Unfortunately, there is currently no CSS code that we can use to maintain the red color in the cell after it has been clicked. This is simply not possible to achieve with the matrix table. An alternate solution would be to use the MultiSelect Grid Widget instead, although I understand that this is not suitable for your requirement.

A possible workaround you can do to achieve this would be to modify the html code of your form and add custom jQuery code to keep the color of the selected cell after being clicked. This would require you to download the full source code of your form and host the code on your own server. Here's a guide on How to get the Full Source Code of your Form. 

You can also check out this thread on the code that you can use: http://stackoverflow.com/questions/17703710/changing-the-color-of-a-clicked-table-row-using-jquery. If you are unfamiliar with jQuery, you may need to hire a programmer to customize the code on your form and achieve your requirement.

Please let us know if you need further assistance.
Regards.