How to style active select components?

Panel
1

I understand how to stylize the selected item background by doing something like this:

/* Ensure the active option retains the desired color */
option:checked {{
    background-color: {theme_settings['secondary_color']};
    color: {theme_settings['dark_font']};
}}

And this properly works in my panel sidebar:

image
image392×683 15.8 KB

However, when the specific select component is selected/active, the background changes to blue:

image
image388×684 14.2 KB

How can I disable this or change the active option background-color?

2

Hi @ustropics

Inspired by html - Change background color of clicked option in duallistbox - Stack Overflow, you can do something like:

import panel as pn

pn.extension()

CSS = """
select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#FFC894,#FFC894);
    background-color: #FFC894 !important; /* for IE */
}
"""

multi_select = pn.widgets.MultiSelect(name='MultiSelect', value=['Apple', 'Pear'],
    options=['Apple', 'Banana', 'Pear', 'Strawberry'], size=8, stylesheets=[CSS])

pn.template.MaterialTemplate(site="Panel", title="App", sidebar=[multi_select]).servable()

image

2 Likes
3

Thanks for the reply! This did allow me to stylize the necessary component. As a follow up, how can I also stylize the font color? When the widget is not actively selected, it works as intended:
image

However, when I actively select the component, it changes the font color to white:
image

One last question. How can I also stylize the dropdown arrow for the select widget (currently black)? Looking in the CSS, it appears to be a svg css element that is set to black color:

select:not([multiple]).bk-input, select:not([size]).bk-input {
    background-image: url(data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="black" /></svg>);
    min-height: 1.4375em;
    padding: 8px 10px;
}