Question

Dropdown selection background have to change from blue to any other color

Hi everyone,
Is it possible to change the dropdown selection background color from blue to any other color?

I followed 2 approaches through skin level.

1.Changed color in the dropdown control through the skin by using inherited. But we can't edit the inherited styling.so I tried the second way
2.Created my own format(My format)

But it's changing only in the dropdown background color, not in the Dropdown selection background color. I have attached the screenshot below. Could anyone help me to achieve this?.

Early response will be highly appreciated.

Thanks,
Sornalatha R

Comments

Keep up to date on this post and subscribe to comments

Pega
June 17, 2019 - 12:07am

June 17, 2019 - 7:13am
Response to Evita_08

Hi Evita,

Thanks for your response. I have gone through the link. They are mentioned like changing the dropdown background. That one we achieved already. But my requirement I have to change the selection of background color from the dropdown.

 

For example, in the above screenshot, there will be three dropdowns (Contact person1, Contact person2, Contact person3). Suppose if I select contact perosn1 from the dropdown, The contact person1 background I want to change from blue to any other color.

 

Could you help me to achieve this?

 

Thanks,

Sornalatha R

Pega
June 18, 2019 - 3:11am
Response to SORNALATHAR2728

Hi ,

These is the default color (probably added by the browser ) on hovering on the options of a select tag. I will suggest you  not to override that. 

You can have the options to set either the color of the text or the background color of the options. 

 

June 19, 2019 - 9:46pm

@SORNALATHAR2728 have you found any solution for this ?

July 1, 2019 - 1:33am

Hi,

I have already changed the background color of the dropdown. But my requirement is when the user hovers the dropdown it have to change the color from blue to any other color

 

Thanks,

Sornalatha R

Pega
July 1, 2019 - 3:14am
Response to SORNALATHAR2728

Hi,

This color is browser specific and has nothing to do with Pega UI. You could try changing it at browser level. 

Check this link: https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover

Unfortunately, as has been stated on many online forums, you cannot reliably style form controls. See here for more details.

Thanks

Pega
July 1, 2019 - 3:53am

Hi Team,

It seems to be a browser specific issue and not from Pega.

For more details check the below link in IE and chrome / fire fox, there we can see the differences

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Thanks,

September 3, 2019 - 3:26am

Anyone found any solution for this ? I have the same requirement from my client. Instead of the blue color they are asking to be green. Because our application base color is green and we are not using blue color anywhere.

Can moderator team from Pega take it as prior ?

Pega
September 3, 2019 - 3:50am
Response to ArpanR5311

Hi,

As mentioned earlier, this color is browser specific and has nothing to do with Pega UI. You could try changing it at browser level. However, you cannot reliably style form controls.

September 3, 2019 - 5:03am
Response to Srinivas21

Then how am I changing this dropdown(check attachment) background color in Pega dev portal ? In dev portal anywhere I am able to change that color, I mean the pega existing one only. css class is available for Pega and I am able to override those menus. But why not in other places, like portal or section through out application. What is the menu pega is using internally for the dropdowns ?

September 14, 2019 - 1:58am
Response to ArpanR5311

Hi @ArpanR5311,

The Background color that you have changed in the DevPortal does not corresponds to the DropDown they are menu item so you were able to change it but the dropdown values that getting displayed are different from the above one.Color of DropDown selection is based on browser as mentioned eariler.