Dropdown - how to style expanded state (background colour, padding, font size, font spacing)?


I’m trying to style the expanded state of the dropdown component. Refer to the circled items in the screenshot below.

What I would like to achieve:

  • Left/right padding so that text isn’t so close to the edge in the expanded state.
  • Top/bottom padding so that the individual items in the list are further apart (more vertical spacing between elements)
  • Change the background colour of the opened list.
  • Change the highlight colour from blue.

I can’t find anywhere in the isolation mode to preview the expanded state to enable customisation of the open dropdown.



Thats a default component you cant change these parameters

Thanks Dimos, any idea how to achieve this some other way?

Actually, i might be wrong, because i dont know what component you use, but i managed to edit this dropdown(find it in marketplace)

then, you can go in the component editor you can change such parameters. I managed to edit the padding and the background color

you can also try to play with the primitive dropdown but i dont thing you can change more than that

Thanks I’ve tried those items and was using same component as you. It enables some changes but not enough to make it consistent with the rest of the UI. @Mevi any ideas? @richard.anderson your name appears in the component, anything that can be done to expose more of the internals of the component for editing?

Unfortunately there aren’t further customizations available at the moment. You could build your own dropdown component for web and use that instead? You can take inspiration from Date field or Multi Combo Box components for example.

Thanks, I’ll give it a go.