How do I create a background colour or increased font size for a row in a input table

  • GuildMusic
    Asked on April 5, 2018 at 7:03 AM

    I would like to make headers in some of the rows stand out more by increasing the font size and also making the background colour a darker grey colour.

    What CSS do I apply and where do I put it.

    I've added bold font in the forms input table properties Rows section, and managed to insert code for putting a background colour behind the text yet I would like the full row to have the darker colour.  I also managed in the form designer to put the input text fields a colour background with CSS.  Yet are having issues with identify the actual id for each of the rows for the form designer section as the field does not seem to allow for me to just click on the row and only allows for me to click on the text bold area.

    Hope you can assist so I'm not wasting my time over this one thing. 

  • Scott JotForm Developer
    Replied on April 5, 2018 at 9:15 AM

    Hey Bernie,

    This snippet should solve this issue. Can you please test it and confirm?

    #id_15 tr:nth-child(3) th.form-matrix-row-headers,

    #id_15 tr:nth-child(15) th.form-matrix-row-headers,

    #id_15 tr:nth-child(18) th.form-matrix-row-headers,

    #id_15 tr:nth-child(29) th.form-matrix-row-headers,

    #id_15 tr:nth-child(32) th.form-matrix-row-headers,

    #id_15 tr:nth-child(40) th.form-matrix-row-headers,

    #id_15 tr:nth-child(54) th.form-matrix-row-headers {

        background : #C0C4C5;

        font-size : 14px;

        padding : 4px 0 4px 20px;

        height : 30px;

        border-right : none;

    }

     

    #id_15 tr:nth-child(3) td.form-matrix-values,

    #id_15 tr:nth-child(15) td.form-matrix-values,

    #id_15 tr:nth-child(18) td.form-matrix-values,

    #id_15 tr:nth-child(29) td.form-matrix-values,

    #id_15 tr:nth-child(32) td.form-matrix-values,

    #id_15 tr:nth-child(40) td.form-matrix-values,

    #id_15 tr:nth-child(54) td.form-matrix-values {

        background : #C0C4C5 !important;

        border-color : #C0C4C5;

    }

     

    #id_15 tr:nth-child(3) input,

    #id_15 tr:nth-child(15) input,

    #id_15 tr:nth-child(18) input,

    #id_15 tr:nth-child(29) input,

    #id_15 tr:nth-child(32) input,

    #id_15 tr:nth-child(40) input,

    #id_15 tr:nth-child(54) input {

        display : none;

  • GuildMusic
    Replied on April 5, 2018 at 10:05 AM

    That worked Scott, thank you so much for your help the form looks far better now and I can finalise the form with the other conditions and use the table instead of the PayPal section that we were using before.

    Kind Regards Bernie