[Dash Mantine Components] How to change style of an active component element(s)?

Dash Python
1

Hey all,

I was experimenting with styles API of DMC to change border-color of the SearchInput element of a dmc.MultiSelect component. However, I could not come up with a way to change its color when it gets ACTIVE (when you clicked on it etc.)

I know that I can change the border-color of a SearchInput element when it is NOT ACTIVE by putting the below code snippet in to the css file:

  .mantine-MultiSelect-searchInput{
    border-color: red; 
}

However, don’t have a clue when how to change it when it gets ACTIVE.

I also tried this with no avail:

  .mantine-MultiSelect-searchInput[data-active='True']{
    border-color: red; 
}

Any recommendations on how to specify component’s activity?

Cheers to all!

2

Hello @Berbere,

I believe that you should be able to use the :focus attribute.

Also, you can make it so that this takes priority by adding an !important:

.mantine-MultiSelect-searchInput{
    border-color: red !important; 
}
3

Hey @jinnyzor,

Unfortunately, I couldn’t manage to make it work.
Do you have any other recommendation that I could give it a try.

I tried both with :focus and :focus-within arguments without any success.

Cheers

4

Have you tried looking at the styles API?

5

Finally made it!

.mantine-MultiSelect-input:focus-within{
border-color: red !important;
}

worked for me!

1 Like