Need help changing colors in some specific parts of my form

I have a number of color changing questions on this form: https://form.jotform.com/222097020151139

I'm trying to change the color of the subheading text and signature box text. I'd like the subheading text to match the color I'm using in the headers and the back/next buttons (#008000). I'd like the subheading text to be black like the heading text.

I would also like to change the color of the circle in the dropdown for a section heading from gray to black:

And I'd like to change the background color and text color of this input table.

I've tried using the CSS codes suggested on the support pages and haven't had as much success with these particular items.

Would appreciate your help.

Thanks

Hello Jennifer,

Thanks for reaching out to Jotform Support. Could you please allow me some time to closely look into this?

Your patience is most appreciated.

Hello Jennifer,

Thanks for reaching out to Jotform Support. Please inject the following CSS code into your form:

#subHeader_157 {

  color: black !important;

}



.form-collapse-table:after {

  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjggMTRDMjggNi4yNjgwMSAyMS43MzIgLTkuNDk5MzVlLTA3IDE0IC02LjExOTU5ZS0wN0M2LjI2ODAxIC0yLjczOTg0ZS0wNyAtOS40OTkzNWUtMDcgNi4yNjgwMSAtNi4xMTk1OWUtMDcgMTRDLTIuNzM5ODRlLTA3IDIxLjczMiA2LjI2ODAxIDI4IDE0IDI4QzIxLjczMiAyOCAyOCAyMS43MzIgMjggMTRaTTguMDAyNCAxMS43MDAzQzcuOTkyNDQgMTEuNTgxMyA4LjAxMzYzIDExLjQ2MTcgOC4wNjM1OSAxMS4zNTQ5QzguMTEzNDcgMTEuMjQ4MiA4LjE5MDA1IDExLjE1ODUgOC4yODQ3OSAxMS4wOTU5QzguMzc5NTIgMTEuMDMzMiA4LjQ4ODY1IDExIDguNTk5OTkgMTFMMTkuNCAxMUMxOS41MTEzIDExIDE5LjYyMDUgMTEuMDMzMiAxOS43MTUyIDExLjA5NTlDMTkuODA5OSAxMS4xNTg1IDE5Ljg4NjUgMTEuMjQ4MiAxOS45MzY0IDExLjM1NDlDMTkuOTc3OSAxMS40NDQ0IDE5Ljk5OTYgMTEuNTQyOSAyMCAxMS42NDI5QzIwIDExLjc4MiAxOS45NTc5IDExLjkxNzMgMTkuODggMTIuMDI4NkwxNC40OCAxOS43NDI5QzE0LjQyNDEgMTkuODIyNyAxNC4zNTE2IDE5Ljg4NzUgMTQuMjY4MyAxOS45MzIxQzE0LjE4NSAxOS45NzY4IDE0LjA5MzEgMjAgMTQgMjBDMTMuOTA2OCAyMCAxMy44MTUgMTkuOTc2OCAxMy43MzE3IDE5LjkzMjFDMTMuNjQ4NCAxOS44ODc1IDEzLjU3NTkgMTkuODIyNyAxMy41MiAxOS43NDI5TDguMTE5OTkgMTIuMDI4NkM4LjA1MzA4IDExLjkzMyA4LjAxMjM2IDExLjgxOTMgOC4wMDI0IDExLjcwMDNaIiBmaWxsPSJibGFjayIvPg0KPC9zdmc+DQo=)

}



.form-matrix-column-headers, .form-matrix-row-headers {

  background-color: #008000 !important;

  color: white !important;

}



.signature-pad-passive, .signature-placeholder::after {

 

  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk4IiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTk4IDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZD0iTTc0LjEwNDQgNi4zNDUwOEg3NS41ODU5Qzc1LjU0MTIgNC43MTQ0IDc0LjA5OTQgMy41MzExNiA3Mi4wMzEyIDMuNTMxMTZDNjkuOTg3OSAzLjUzMTE2IDY4LjQyMTkgNC42OTk0OCA2OC40MjE5IDYuNDU0NDZDNjguNDIxOSA3Ljg3MTM2IDY5LjQzNjEgOC43MDE2MiA3MS4wNzE3IDkuMTQ0MDlMNzIuMjc0OSA5LjQ3MjIxQzczLjM2MzYgOS43NjA1NiA3NC4yMDM4IDEwLjExODUgNzQuMjAzOCAxMS4wMjMzQzc0LjIwMzggMTIuMDE3NyA3My4yNTQzIDEyLjY3MzkgNzEuOTQ2NyAxMi42NzM5QzcwLjc2MzUgMTIuNjczOSA2OS43NzkxIDEyLjE0NjkgNjkuNjg5NiAxMS4wMzgzSDY4LjE0ODRDNjguMjQ3OSAxMi44ODI3IDY5LjY3NDcgMTQuMDIxMiA3MS45NTY3IDE0LjAyMTJDNzQuMzQ4IDE0LjAyMTIgNzUuNzI1MSAxMi43NjM0IDc1LjcyNTEgMTEuMDM4M0M3NS43MjUxIDkuMjAzNzUgNzQuMDg5NSA4LjQ5MjgxIDcyLjc5NjkgOC4xNzQ2M0w3MS44MDI2IDcuOTE2MUM3MS4wMDcxIDcuNzEyMjcgNjkuOTQ4MiA3LjMzOTQgNjkuOTUzMSA2LjM2NDk3QzY5Ljk1MzEgNS40OTk5MSA3MC43NDM2IDQuODU4NTggNzEuOTk2NCA0Ljg1ODU4QzczLjE2NDggNC44NTg1OCA3My45OTUgNS40MDU0NSA3NC4xMDQ0IDYuMzQ1MDhaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNNzcuNDQxNiAxMy44NTIySDc4LjkyODFWNi4yMTU4Mkg3Ny40NDE2VjEzLjg1MjJaTTc4LjE5MjMgNS4wMzc1NUM3OC43MDQ0IDUuMDM3NTUgNzkuMTMxOSA0LjYzOTgzIDc5LjEzMTkgNC4xNTI2MUM3OS4xMzE5IDMuNjY1MzkgNzguNzA0NCAzLjI2MjcgNzguMTkyMyAzLjI2MjdDNzcuNjc1MiAzLjI2MjcgNzcuMjUyNyAzLjY2NTM5IDc3LjI1MjcgNC4xNTI2MUM3Ny4yNTI3IDQuNjM5ODMgNzcuNjc1MiA1LjAzNzU1IDc4LjE5MjMgNS4wMzc1NVoiIGZpbGw9IiMwMDgwMDAiLz4NCjxwYXRoIGQ9Ik04NC4xMjk2IDE2Ljg2Qzg2LjA3MzUgMTYuODYgODcuNTc0OSAxNS45NzAxIDg3LjU3NDkgMTQuMDIxMlY2LjIxNTgySDg2LjExODNWNy40NTM3NUg4Ni4wMDg5Qzg1Ljc0NTQgNi45ODE0NSA4NS4yMTg0IDYuMTE2MzkgODMuNzk2NSA2LjExNjM5QzgxLjk1MjEgNi4xMTYzOSA4MC41OTQ4IDcuNTczMDYgODAuNTk0OCAxMC4wMDQyQzgwLjU5NDggMTIuNDQwMyA4MS45ODE5IDEzLjczNzggODMuNzg2NiAxMy43Mzc4Qzg1LjE4ODYgMTMuNzM3OCA4NS43MzA1IDEyLjk0NzQgODUuOTk4OSAxMi40NjAxSDg2LjA5MzRWMTMuOTYxNkM4Ni4wOTM0IDE1LjEzOTggODUuMjczMSAxNS42NjE4IDg0LjE0NDUgMTUuNjYxOEM4Mi45MDY2IDE1LjY2MTggODIuNDI0NCAxNS4wNDA0IDgyLjE2MDkgMTQuNjE3OEw4MC44ODMyIDE1LjE0NDhDODEuMjg1OSAxNi4wNjQ1IDgyLjMwNSAxNi44NiA4NC4xMjk2IDE2Ljg2Wk04NC4xMTQ3IDEyLjUwNDlDODIuNzg3MyAxMi41MDQ5IDgyLjA5NjIgMTEuNDg1NyA4Mi4wOTYyIDkuOTg0MjlDODIuMDk2MiA4LjUxNzY3IDgyLjc3MjQgNy4zNzkxNyA4NC4xMTQ3IDcuMzc5MTdDODUuNDEyMyA3LjM3OTE3IDg2LjEwODMgOC40MzgxMiA4Ni4xMDgzIDkuOTg0MjlDODYuMTA4MyAxMS41NjAzIDg1LjM5NzQgMTIuNTA0OSA4NC4xMTQ3IDEyLjUwNDlaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNOTEuMDU1IDkuMzE4MDlDOTEuMDU1IDguMTAwMDUgOTEuODAwOCA3LjQwNDAzIDkyLjgzNDkgNy40MDQwM0M5My44NDQxIDcuNDA0MDMgOTQuNDU1NiA4LjA2NTI1IDk0LjQ1NTYgOS4xNzM5MlYxMy44NTIySDk1Ljk0MjFWOC45OTQ5NEM5NS45NDIxIDcuMTA1NzQgOTQuOTAzMSA2LjExNjM5IDkzLjM0MiA2LjExNjM5QzkyLjE5MzUgNi4xMTYzOSA5MS40NDI4IDYuNjQ4MzUgOTEuMDg5OCA3LjQ1ODcySDkwLjk5NTRWNi4yMTU4Mkg4OS41Njg1VjEzLjg1MjJIOTEuMDU1VjkuMzE4MDlaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNMTAxLjc2IDEzLjg1MjJIMTAzLjI5NlY5LjQxMjU1SDEwOC4zNzJWMTMuODUyMkgxMDkuOTE0VjMuNjcwMzdIMTA4LjM3MlY4LjA5NTA4SDEwMy4yOTZWMy42NzAzN0gxMDEuNzZWMTMuODUyMloiIGZpbGw9IiMwMDgwMDAiLz4NCjxwYXRoIGQ9Ik0xMTUuMzIzIDE0LjAwNjNDMTE2Ljk4OCAxNC4wMDYzIDExOC4xNjYgMTMuMTg2IDExOC41MDQgMTEuOTQzMUwxMTcuMDk3IDExLjY4OTVDMTE2LjgyOSAxMi40MTA0IDExNi4xODMgMTIuNzc4MyAxMTUuMzM4IDEyLjc3ODNDMTE0LjA2NSAxMi43NzgzIDExMy4yMSAxMS45NTMgMTEzLjE3IDEwLjQ4MTRIMTE4LjU5OVY5Ljk1NDQ2QzExOC41OTkgNy4xOTUyMiAxMTYuOTQ4IDYuMTE2MzkgMTE1LjIxOCA2LjExNjM5QzExMy4wOSA2LjExNjM5IDExMS42ODggNy43MzcxMyAxMTEuNjg4IDEwLjA4MzdDMTExLjY4OCAxMi40NTUyIDExMy4wNyAxNC4wMDYzIDExNS4zMjMgMTQuMDA2M1pNMTEzLjE3NSA5LjM2NzgxQzExMy4yMzUgOC4yODQgMTE0LjAyIDcuMzQ0MzcgMTE1LjIyOCA3LjM0NDM3QzExNi4zODIgNy4zNDQzNyAxMTcuMTM3IDguMTk5NDkgMTE3LjE0MiA5LjM2NzgxSDExMy4xNzVaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNMTIwLjI0OCAxMy44NTIySDEyMS43MzVWOS4xODg4M0MxMjEuNzM1IDguMTg5NTQgMTIyLjUwNSA3LjQ2ODY2IDEyMy41NTkgNy40Njg2NkMxMjMuODY4IDcuNDY4NjYgMTI0LjIxNiA3LjUyMzM1IDEyNC4zMzUgNy41NTgxNVY2LjEzNjI3QzEyNC4xODYgNi4xMTYzOSAxMjMuODkyIDYuMTAxNDcgMTIzLjcwMyA2LjEwMTQ3QzEyMi44MDkgNi4xMDE0NyAxMjIuMDQzIDYuNjA4NTggMTIxLjc2NSA3LjQyODg5SDEyMS42ODVWNi4yMTU4MkgxMjAuMjQ4VjEzLjg1MjJaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNMTI4LjYzOSAxNC4wMDYzQzEzMC4zMDUgMTQuMDA2MyAxMzEuNDgzIDEzLjE4NiAxMzEuODIxIDExLjk0MzFMMTMwLjQxNCAxMS42ODk1QzEzMC4xNDUgMTIuNDEwNCAxMjkuNDk5IDEyLjc3ODMgMTI4LjY1NCAxMi43NzgzQzEyNy4zODEgMTIuNzc4MyAxMjYuNTI2IDExLjk1MyAxMjYuNDg2IDEwLjQ4MTRIMTMxLjkxNVY5Ljk1NDQ2QzEzMS45MTUgNy4xOTUyMiAxMzAuMjY1IDYuMTE2MzkgMTI4LjUzNSA2LjExNjM5QzEyNi40MDcgNi4xMTYzOSAxMjUuMDA1IDcuNzM3MTMgMTI1LjAwNSAxMC4wODM3QzEyNS4wMDUgMTIuNDU1MiAxMjYuMzg3IDE0LjAwNjMgMTI4LjYzOSAxNC4wMDYzWk0xMjYuNDkxIDkuMzY3ODFDMTI2LjU1MSA4LjI4NCAxMjcuMzM2IDcuMzQ0MzcgMTI4LjU0NSA3LjM0NDM3QzEyOS42OTggNy4zNDQzNyAxMzAuNDU0IDguMTk5NDkgMTMwLjQ1OSA5LjM2NzgxSDEyNi40OTFaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNMSAzNi4wMjI5QzEyLjI0NjEgMzkuMjIwNSAyMy4xODIgMzUuMDMyOCAzMi41MDg0IDI4Ljg1MTFDMzcuNDQwNCAyNS41ODIyIDQyLjMzNDEgMjEuNjY4NyA0NS4zMzI5IDE2LjUxMDFDNDYuNTI4MyAxNC40NTM5IDQ3Ljk4OTMgMTAuODg0NCA0NC4yMjcxIDEwLjg1MjhDNDAuMTMzNyAxMC44MTgzIDM3LjA4NjQgMTQuNTE0MiAzNS41NTg4IDE3Ljg3NDRDMzMuMzY4MSAyMi42OTMzIDMzLjI5MSAyOC40MDA0IDM1Ljk2NTYgMzMuMDQ0MUMzOC40OTcxIDM3LjQzOTYgNDIuNzQ0NSAzOS41MTg0IDQ3LjgxMTQgMzguNjYzOUM1My4xMDM3IDM3Ljc3MTMgNTcuNzMwNCAzNC4xNTYyIDYxLjU3NjUgMzAuNjc4NUM2Mi45OTMgMjkuMzk3NiA2NC4zMjA5IDI4LjA0NzUgNjUuNTQyIDI2LjU4NTdDNjUuNjg0MiAyNi40MTU1IDY2LjE4NDIgMjUuNTc5OCA2Ni41MDggMjUuNTIxOEM2Ni42Mjg0IDI1LjUwMDIgNjYuODA2NCAyOS4xNjQ1IDY2LjgzODUgMjkuMzY0M0M2Ny4xMjU1IDMxLjE1NDMgNjguMDI5NCAzMy4xNzA2IDcwLjE0MzEgMzMuMjMxOEM3Mi44MzMyIDMzLjMwOTcgNzUuMDgyNiAzMS4wNTkxIDc2Ljg5MjIgMjkuNDAxOEM3Ny41MDI2IDI4Ljg0MjggNzkuNDQyNSAyNi4xNjAxIDgwLjQ3NjQgMjYuMTYwMUM4MC45MDE0IDI2LjE2MDEgODEuNzI0OSAyOC4zMDM4IDgxLjkxMjcgMjguNTg4M0M4NC4zOTcyIDMyLjM1MjMgODguMDQ0NiAzMC45ODk0IDkwLjg3MzMgMjguMzUwNUM5MS4zOTM0IDI3Ljg2NTMgOTQuMTc4MSAyMy45ODM5IDk1LjMwOTEgMjQuNjgzMkM5Ni4yMjAzIDI1LjI0NjYgOTYuNjIxNyAyNi41NzY1IDk3LjA4ODYgMjcuNDYxOEM5Ny44NDg0IDI4LjkwMjkgOTguODEwNyAyOS45Mjk0IDEwMC40MTkgMzAuNDY1N0MxMDMuOTEyIDMxLjYzMSAxMDcuNjggMjguMzYzIDExMS4yMjIgMjguMzYzQzExMi4yNTUgMjguMzYzIDExMi43ODMgMjguOTMxNiAxMTMuMzMyIDI5LjcxNDhDMTE0LjA4MSAzMC43ODIzIDExNC44NTMgMzEuNTI3NiAxMTYuMjA1IDMxLjgxNzVDMTIwLjM5MyAzMi43MTU1IDEyMy44MjIgMjguNzM5OSAxMjcuODcyIDI5LjA4ODlDMTI5LjA1MyAyOS4xOTA3IDEyOS45MzUgMzAuMzgxNiAxMzAuODIxIDMxLjAxNjRDMTMyLjYwOSAzMi4yOTY5IDEzNC43NTkgMzMuMTgzNiAxMzYuOTQ4IDMzLjQ5NDdDMTQwLjQ1NyAzMy45OTM0IDE0My45NzUgMzMuMzMyNiAxNDcuMzk1IDMyLjU5MzVDMTUzLjMgMzEuMzE3NCAxNTkuMTQ3IDI5Ljc5NTggMTY1LjA2MiAyOC41NjMzIiBzdHJva2U9IiMwMDgwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xOTYuNTE1IDE1LjA3NzhMMTg0LjQ5MiAwLjU1MTc5NUMxODQuMjU3IDAuMjY3ODEgMTgzLjgzOCAwLjIyODI2IDE4My41NTQgMC40NjMzMDdMMTgwLjY0OSAyLjg2Nzg4QzE4MC4zNjUgMy4xMDI5MyAxODAuMzI1IDMuNTIyNCAxODAuNTYgMy44MDYzOEwxOTIuNTgzIDE4LjMzMjRDMTkyLjcgMTguNDc0MSAxOTIuODY0IDE4LjU1NTEgMTkzLjAzNCAxOC41NzEyQzE5My4yMDQgMTguNTg3MiAxOTMuMzggMTguNTM4MiAxOTMuNTIyIDE4LjQyMDlMMTk2LjQyNyAxNi4wMTY0QzE5Ni43MTEgMTUuNzgxMyAxOTYuNzUgMTUuMzYxOCAxOTYuNTE1IDE1LjA3NzhaIiBmaWxsPSIjMDA4MDAwIi8+DQo8cGF0aCBkPSJNMTgxLjQzNiA2Ljk1NzJMMTcwLjg1NSA5LjgyNTkzQzE3MC42MjIgOS44ODkwMSAxNzAuNDQxIDEwLjA3MjkgMTcwLjM4MyAxMC4zMDcxTDE2Ni4xNTUgMjcuMTAxN0wxNzMuOTc1IDIwLjYyOTFDMTczLjI0NSAxOS4yNjEyIDE3My41NSAxNy41MTg5IDE3NC43OSAxNi40OTIxQzE3Ni4yMDYgMTUuMzE5OCAxNzguMzEyIDE1LjUxOTEgMTc5LjQ4MyAxNi45MzQ2QzE4MC42NTUgMTguMzUwOCAxODAuNDU2IDIwLjQ1NjEgMTc5LjA0MSAyMS42Mjc4QzE3OC4zMzMgMjIuMjEzOSAxNzcuNDUyIDIyLjQ1NzcgMTc2LjYwMyAyMi4zNzc2QzE3NS45NjQgMjIuMzE3NCAxNzUuMzQzIDIyLjA3NCAxNzQuODI1IDIxLjY1NjhMMTY3LjAwNSAyOC4xMjg2TDE4NC4yOTQgMjcuMTEzN0MxODQuNTM0IDI3LjA5OTYgMTg0Ljc0OSAyNi45NTcxIDE4NC44NTQgMjYuNzQwMUwxODkuNjUgMTYuODgxNEwxODEuNDM2IDYuOTU3MloiIGZpbGw9IiMwMDgwMDAiLz4NCjwvc3ZnPg==) !important;

 

 

}



.clear-pad-btn {

  background-color: #008000 !important;

}

Result:

Related guide: How-to-inject-custom-css-codes

Should you have any further inquiries, please feel free to contact us.

That's great! Thanks very much.

A couple of additional changes I'd like to make:

#subHeader_157 {

  color: black !important;

}

How can I have this subheader color apply to all of them, not just subHeader_157?

How can I have the grid lines and the circles be black, not gray?

Thanks for your help with this!

Hello Jennifer,

Thanks for reaching out to Jotform Support. Please inject the following CSS code into your form:

*[id^="subHeader"] {

 color: black !important;

}

.form-matrix-values, .form-radio + label::before, .form-radio + span::before {

  border-color: black !important;

}

Result:

Related guide: How-to-inject-custom-css-codes

Should you have any further inquiries, please feel free to contact us.

One more question: How can I get the borders of the radio button questions to be black instead of gray?

Thanks-

Hi Jennifer,

Thanks for getting back to us. Please inject the below CSS code into your form to change the border color to black:

th.form-matrix-headers.form-matrix-row-headers,

.form-matrix-headers.form-matrix-column-headers {

    border-color: black !important;

}



th.form-matrix-th {

    border-bottom: 1px solid !important;

}

Result:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

THANK YOU so very much for all of your help!!

My next question is how can I create a template or something similar so that I don't need to make these changes each time I create a form. These settings are the look and feel I'd like to have for all of my forms going forward.

Thanks again!!

Hello Jennifer,

Thanks for reaching out to Jotform Support. Please note that you can clone the form and build on top of the cloned version. This will save you time and effort from copying the code repeatedly.

Related guide: How-to-clone-an-existing-form-from-your-account

Should you have any further inquiries, please feel free to contact us.