Thanks for the quick reply, @João Marques.

Apologies for my ignorance but how do you combine them in the CSS editor?

Hi Andrew,

Imagining you want to have your dropdowns the same, except the specific one, you want font-size 16px, I would do:

/* defining the style of dropdowns in general */
.dropdown {
   border-raius: 5px;
   font-size: 12px;
   height: 25px;
 }

/* defining the style of dropdowns which have the my-specific class. In case of the same attribute, in this case, the font-size, it will override the default given that the selector (dropdown + my-specific-class) is more specific */
.dropdown.my-specific-class {
   font-size: 16px;
}

Kind Regards,
João

Let me give some better context, I basically want to hide the dropdown icon since I making it quite small and looks weird if the icon is still there.

You can view an example of the application here:
https://personal-ejnh37li.outsystemscloud.com/Sandbox/Test?_ts=638049059243023407

But as you can see the CSS that I have added in the Style Sheets impacts the filter dropdown of the names.

Hi Andrew,

Thanks for your explanation.
A bit clearer, thanks.

The solution I was proposing was to add a specific class to that dropdown. However, analysing the CSS, we can see that you want to apply the changes to the element dropdown-container which is the parent of the dropdown element, so that approach wouldn't work.


What you can do is to add a specific class to the container that has the specific dropdown-container, so you can change only that one.


And now on the CSS, you can adapt to say that you're only going to apply changes to the dropdowns inside the container with the container-dropdown-hide-icon class. As you can see in the image below, by doing that, the dropdown inside that container (dropdown number 1) has the changes, and the one below doesn't:


Hope it helps. Please let me know if it works for you.

Kind Regards,
João