Input Table: Modify Form Button Colors Using Custom CSS Code

I need some assistance with CSS coding so that I can change the colors of the buttons to match our branding colors. The form is called "Overnight Experience Feedback Form" and I would like the inside of the buttons to be hex #f8efca and the border and text of the buttons to be #d5c16a.

I want this for both our submit/ next page buttons AND the current clickable questions/ numbered scale rating buttons (i.e. 1-10)....

I would also like all of the input tables to be the #d5c16a. Thanks!

Hi LeAnna,

Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi LeAnna,

You can modify the colors of elements using custom CSS. You can inject the custom CSS codes I made into your form CSS injector. Let me show you how to do it:

1. First, copy this code:

/*Rating Scale*/

.rating-item label {

  background-color: #f8efca !important;

  border: 2px solid #d5c16a !important;

  color: #d5c16a !important;

  padding: 10px;

  border-radius: 50%;

  cursor: pointer;

  text-align: center;

  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;

}

.rating-item label:hover {

  background-color: #d5c16a !important;

  color: white !important;

}

.rating-item input[type="radio"]:checked + label,

.rating-item input[type="checkbox"]:checked + label {

  background-color: #d5c16a !important;

  color: #f8efca !important;

}

.rating-item input[type="radio"]:focus + label,

.rating-item input[type="checkbox"]:focus + label {

  outline: none !important;

  box-shadow: none !important;

}

#cid_25 > span > div > div > div:nth-child(1) > span > label, 

#cid_23 > span > div > div > div:nth-child(1) > span > label,

#cid_24 > span > div > div > div:nth-child(1) > span > label,

#cid_23 > span > div > div > div:nth-child(10) > span > label,

#cid_25 > span > div > div > div:nth-child(10) > span > label,

#cid_24 > span > div > div > div:nth-child(10) > span > label,

#cid_17 > span > div > div > div:nth-child(1) > span > label,

#cid_17 > span > div > div > div:nth-child(10) > span > label {

  background: #00000000 !important;

  color: #005875 !important;

  border: 0px !important;

}

/*Single Choice*/

.form-radio-item:not(#foo) label:after {

  background-color: #f8efca !important;

}

.form-radio-item:not(#foo) label:before {

  border: 1px solid #d5c16a !important;

  box-shadow: 0 0 2px #d5c16a;

}

/* Override JotForm star image */

div.form-star-rating-star::before {

  content: "★";

  font-size: 50px !important;

  color: #f8efca !important;

  text-align: center;

  line-height: 1;

  position: relative !important;

  right: 9px !important;

  bottom: 8px !important;

  text-shadow: 

    -1px -1px 0 #d5c16a,  

    1px -1px 0 #d5c16a,  

    -1px 1px 0 #d5c16a,  

     1px 1px 0 #d5c16a;

}

div.form-star-rating-star:hover::before,

div.form-star-rating-star.rated::before {

  color: #d5c16a !important;

}

.form-matrix-table input[type="radio"] + label::before {

  border: 1.5px solid #d5c16a !important;

  width: 18px !important;

  height: 18px !important;

  border-radius: 50% !important;

  display: inline-block;

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.form-matrix-table input[type="radio"]:hover + label::before {

  background-color: #fdecb2 !important;

  border-color: #d5c16a !important;

}

/*Input Tables*/

.form-matrix-table input[type="radio"]:checked + label::before {

  background-color: #f8efca !important;

  border-color: #d5c16a !important;

}

.form-matrix-table input[type="radio"]:checked + label::after {

  background-color: #f8efca !important;

}

.form-matrix-table input[type="radio"]:focus + label::before {

  border: 3px solid #d5c16a !important;

  box-shadow: 0 0 2px #d5c16a !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Thats it. Just let us know if there's any adjustments you would like to apply to it.

Give it a try and let us know if you have any other questions.

Hi! This is great!

I wanted the actual text boxes of the input tables as well as the multiple choice clickables to also be the yellow and gold!! Please help!

Hi LeAnna,

To clarify, would you like the text boxes inside the Input Tables to be gold as well? If yes, you can inject the CSS Custom Code below and follow the guide that provided by my colleague above.

td.form-matrix-values {

    background-color: #f8efca;

}

th.form-matrix-headers.form-matrix-row-headers {

    background-color: #d5c06a;

}

th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0 {

    background-color: #d5c06a;

}

th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_1 {

    background-color: #d5c06a;

}

th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_2 {

    background-color: #d5c06a;

}

th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_3 {

    background-color: #d5c06a;

}

th.form-matrix-headers.form-matrix-column-headers.form-matrix-column_4 {

    background-color: #d5c06a;

}

Regarding with the multiple choice clickable inside the Input Table, it was already in yellow because of the code provided by my colleague above. Check out my screenshot below:

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

Keep us updated and let us know if you need any more help.

Hi! This is what I was hoping for but with a couple of changes. I don't want the lines of the of the chart to be the teal. I would like them to be white.

Additionally, for some reason, the last row of the input chart forms is still teal even with that CSS code. Please advise.

Hi LeAnna,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi LeAnna,

The reason why the last row of the input chart of your form still in teal color, it seems that you missed the curly closing bracket } in the custom CSS code. Let me show you how to add the curly bracket:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

2. . Now, in the Form Designer menu, click on the Styles tab.

3. Under Inject Custom CSS, scroll down to line 122 and add the closing curly bracket }.

To change the line of the color of your chart from teal to white color, you can try to copy and inject the CSS Custom Code below:

/**for the line borders*//

.form-matrix-table {

    border: 1px solid white !important;

}

.form-matrix-table td,

.form-matrix-table th {

    border: 1px solid white !important;

}

/*Ends here*/

Check out my screenshot below to see my result:

That's it. All changes will be automatically saved. As for your other question about the Header image, I've moved that to a new thread. You can check that out here.

Give it a try and reach out again if you have any other questions.