Configurable List widget: Highlight first two input fields

2) For "Artwork Details" using configurable list widget, I would like to colour the input columns "Status" and "Loc Code" to highlight these 2 columns.

Can you provide me with the CSS code pls?

Thank you.

Hi Erica,

It's easy to add CSS Code to widgets to highlight your Status and Loc Code, let me show you how:

1. In Form Builder, click on the widget’s Wand Icon to open the Widget Settings.
2. Select Custom CSS tab.
3. Enter the below CSS code in the textarea and click on Update Widget.

select.form-dropdown,.col2 input.translatable.form-textbox {

  background-color: lightblue;

}

That's it. Here's what it should look like afterward:

Let us know if you need any more help.

Hi again Erica,

You can also check out this guide about injecting CSS Codes to widgets.

Reach out again if you need any more help.

Thanks, the code worked perfectly!

But now I added a new column called "WH code" that I also want to display in light blue. In the same configurable list with heading "Artwork Details".

Can you pls give me the CSS code?

Form: https://www.jotform.com/build/250761474380054

Hi Erika,

Here's the code you can insert to make the 'WH Code' field to appear in light blue.

select.form-dropdown,.col3 input.translatable.form-textbox {

  background-color: lightblue;

}

Reach out again if you need any more help.

Hi, I would like 3 columns in light blue: Status, Loc Code, WH Code. In 'Artwork Details' configurable list.

With the above code, 'Loc Code' is not shaded:

Form: https://www.jotform.com/build/250761474380054

Thank you.

Hi Erika,

Here's the updated custom CSS code to highlight three columns—Status, Loc Code, and WH Code—in the Artwork Details configurable list widget:

select.form-dropdown, 

.col2 input.translatable.form-textbox, 

.col3 input.translatable.form-textbox {

  background-color: lightblue;

}

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