nuBuilder Forum

Posted: **Sat Jul 22, 2023 12:06 am**

Hello,

I would like to create a select objet having values with a background color.
Let's say, I have a Select object named select_color having 4 values blue, green, red and yellow.
Will it be possible to have the value blue in white font with a blue background behind in the list, idem for the others colors.
It is available in many places in the product itself.

Capture.PNG

My understanding, it's that it's defined in the css as below

Code: Select all

.nu_browse					{background-color : #8de2e2 !important}
.nu_button					{background-color : #98AFC7 !important}
.nu_display					{background-color : #c79a63 !important}
.nu_dropdown				{background-color : #7bce98 !important}
.nu_html					{background-color : #df7bb9 !important}
.nu_contentbox				{background-color : #43cbdd !important}
.nu_editor					{background-color : #918fd4 !important}
.nu_input					{background-color : #8db3dd !important}
.nu_image					{background-color : #c3998a !important}
.nu_word					{background-color : #68c994 !important}
.nu_lookup					{background-color : #EDDA74 !important}
.nu_subform					{background-color : #f3b6b1 !important}
.nu_run						{background-color : #cbc287 !important}
.nu_textarea				{background-color : #babedb !important}
.nu_select					{background-color : #caa5f6 !important}
.nu_calc					{background-color : #B6B6B4 !important}

is it possible then to instantiate my select object "select_color" like it is done here ?
Many thx,

Yves

Posted: **Wed Jul 26, 2023 5:35 am**

Declare CSS styles in your form's "Style" section like:

Code: Select all

.color-red {
  color: red;
}

Then, to set the above class of a select option that has the value "123":

Code: Select all

$("#your_select_id_here").find('option[value="123"]').addClass('color-red');

(Untested)

Posted: **Wed Jul 26, 2023 1:51 pm**

It appears modified in the select list with a small modification

Code: Select all

$("#your_select_id_here option[value='LEN']").addClass('color-red');

But I would like to keep this color when I have selected the value also.

Video_2023-07-26_134856.gif

Many thx,

Yves

nuBuilder Forum

Select object - colored list

Select object - colored list

Re: Select object - colored list

Re: Select object - colored list