How do I change the background color of a dropdown?

Universal Dashboard
1

I have a dropdown I’ve created and when I open it, the list of items is black text and a transparent background. It makes it hard to read since those items show up on top of other text below it. I’d like to make the items in the dropdown list be in black text with a solid white background that’s opaque. I’ve tried a few things with CSS but haven’t been able to get any to work. Here’s my latest attempt, ideas welcome:

New-UDElement -Id ‘selectCustomer’ -Tag div -Attributes @{
“.dropdown-content” = @{
“background-color” = ‘white’
}
} -Content {
New-UDSelect -Label “Customer” -Option {
Cache:customerList | Select-Object -ExpandProperty customerName | ForEach-Object{New-UDSelectOption -Value _ -Name $_}
}
}

2

For my Dashboards I use a theme.ps1 file and store all my visual customizations in there.

for the select I have the following in my CSS/Theme

'li[class^=disabled], li[class^=disabled]:hover' = @{
        'color' = '#CFCECE !important'
   }

'li[id^=select-options-]' = @{
        'color' = '#000 !important'
}

'li[id^=select-options-]:hover' = @{
     'background-color' = '#DEDEDE !important'
     'color' = '#0378FF !important'
     'border-left-style' = 'solid'
}

Which gives me a UDSelect that looks like this

udselect-custom-css
udselect-custom-css835×471 224 KB

2 Likes
3

Very cool, thanks! Is there also a way to apply this to one specific control vs. using a theme?

4

Hey @Hugepickle to apply a specific type of theme to a specific control you need to download this:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.Style
This allows you to style anything on the fly.

1 Like