How Can I Change the Matrix's Text Color When It is Active?

I'm trying to set this up so that viewers can read the text when they click but the white text becomes difficult to read when you click on a radio button (every other row).

Hi there,

By adding some custom CSS to your form, we can easily make the changes you want. Below, you will find the code for changing the font color when it's active.

.form-line-error {

    color: black;

    text-shadow: 0 -1px white;

}

Please, see the results from the below:

If you want, we can change even more things like green background color when it is active. So, please answer this thread for more customization.

Thanks.

Yes please.  I was using the designer and having trouble get it all correct.  I don't like the green background but couldn't find a color that would make the text legible.

Here's what I'd like.  a light yellow color when highlighted.  The text to be indented on the rows so it's not so close to the edge on the left.  The font to be slightly larger so it's easier to read but not so big that they start wrapping (maybe make the first column wider so it can accommodate the larger font).

Thanks for your help!

a light yellow color when highlighted

For that you can apply the following CSS:

li.form-line.form-line-active {
    background-color: lightyellow;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}

- It will apply a light yellow color to the active matrix field (Please do note that your error code is green - so on error that will be activated).

Now, instead of lightYellow, you might consider one of the following alternatives instead:

1. palegoldenrod

2. moccasin

3. yellow

4. lightgoldenrodyellow

5. lemonchiffon

6. khaki

7. gold

Each are a variant similar to yellow, while each has its own touch. To use it, just replace the (bold) lightyellow text with the new value.

The text to be indented on the rows so it's not so close to the edge on the left.

This CSS will help you with that:

.form-matrix-table tr > th:first-child {
    padding-left: 10px;
}

You can adjust the number (10) to any other number that you wish. The larger the number more text goes to the right and away from the left edge. Lower the number and the text is closer to the left edge.

The font to be slightly larger so it's easier to read but not so big that they start wrapping (maybe make the first column wider so it can accommodate the larger font).

The following CSS will help you with that:

.form-matrix-table th {
    font-size: 14px;
}

You can adjust the number (14) as per your preferences. I would recommend 14 to 16, but since the other text on your form is lower, I believe that 14px would be better than 16.

This is the complete CSS:

li.form-line.form-line-active {
    background-color: lightyellow;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.form-matrix-table tr > th:first-child {
    padding-left: 10px;
}
.form-matrix-table th {
    font-size: 14px;
}

It is also possible to only have the changes you have mentioned applied if the field is active and have it as it currently is until it gets activated. To do that, we need to slightly modify the CSS, so it would be like this:

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;
}

Regardless of the code that you end up using, I would suggest adding it to your form by following these steps: Inject Custom CSS Codes

While doing the same, it is only important to note that when you enter the custom CSS code, you should go down until you reach the end of the code that is currently present. Once you see the bottom, you should click after all the other code and then paste the code.

Once you do you can save your form and preview the changes.

If you have any issues applying the same, do let us know, just as well as if you have any additional questions or issues and we would be happy to assist with the same :)