How to style the matrix field?

  • Profile Image
    Asked on August 02, 2015 at 12:27 PM
    Now I need to figure out how to style the matrix matching the rest of the form.
  • Profile Image
    Answered on August 02, 2015 at 04:50 PM

    I presume that you would like to style the matrix field on this form:

    Now looking at it, I see that it is in a yellowish color, so I presume that this is the layout that you would like to have the matrix field in as well.

    To have the gray background removed, just add the following CSS to your form:

    .form-matrix-row-headers, .form-matrix-column-headers {
        background: none transparent;

    As soon as you do, you will have it looking like so:

    Of course, instead of using none transparent as a value, you can add your own color in it instead.

    The only thing to remember is to add that CSS after all the other CSS code (if any) in your form's custom CSS field - which you can see how here: Inject Custom CSS Codes

    Of course, if needed, do let us know and we would be happy to assist.

  • Profile Image
    Answered on August 02, 2015 at 08:39 PM

    Many thanks for the quick response - much appreciated.

  • Profile Image
    Answered on August 03, 2015 at 01:36 AM

    Hello tbawa,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!