styling the list of a dropdown list

Question

I hav a form with some dropdown list, e.g.

I want to style the list items, e. g.: /* container element in control, selected element from list */ #navDDL .e-ddl.e-input-group.e-control-wrapper .e-input { font-size: 1.2rem; color: white; background: #4a4a4a; } /* custom icon shape and color: \e7fe = double chevron down */ #navDDL .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before { content: '\e70d'; color: white; }------------------------------------------------------------------------------------------------------------ */ /* popup element, list only: background, font-size of list */ #navDDL .e-dropdownbase .e-list-item, #navDDL .e-dropdownbase .e-list-item.e-item-focus { background-color: #a8a8a8; color: white; font-size: 1.2rem; padding: 0.2rem; } /* comma-seperated, should all work alone */ #navDDL .e-dropdownbase .e-list-item.e-item-focus, #navDDL .e-dropdownbase .e-list-item.e-active, #navDDL .e-dropdownbase .e-list-item.e-active.e-hover, #navDDL .e-dropdownbase .e-list-item.e-hover { background-color: #747474; color: yellow; }The first 2 styles are applied, but the last 2, containing .e-dropdownbase were not applied. If I remove #navDDL completely, all styles are applied correctly. But the styles are applied to all pages in the solution, and not only to that page on which they are defined. How can I restrict the styles only to the specific page?Sdditional question: How can I change the icon of the DDL, when the list is visible?Hartmut

Yohapuja Selvakumaran · Answer

Hi Hartmut,Thank you for reaching out us. Query1: How can I restrict the styles only to the specific page?You can set the CssClass property of the dropdownlist to apply a specific style to that particular dropdownlist. If you don't want to apply any specific style, you can simply omit setting the CssClass property for that dropdownlist. This gives you the flexibility to customize the appearance of individual dropdownlists as needed. Kindly check out the below code snippet and attached image.Code Snippet[Index.razor] @using Syncfusion.Blazor.DropDowns; @code { public class GameFields { public string ID { get; set; } public string Text { get; set; } } private List Games = new List() { new GameFields(){ ID= "Game1", Text= "American Football" }, new GameFields(){ ID= "Game2", Text= "Badminton" }, new GameFields(){ ID= "Game3", Text= "Basketball" }, new GameFields(){ ID= "Game4", Text= "Cricket" }, new GameFields(){ ID= "Game5", Text= "Football" }, new GameFields(){ ID= "Game6", Text= "Golf" }, new GameFields(){ ID= "Game7", Text= "Hockey" }, new GameFields(){ ID= "Game8", Text= "Rugby"}, new GameFields(){ ID= "Game9", Text= "Snooker" }, new GameFields(){ ID= "Game10", Text= "Tennis"} }; public string DropDownValue = "Game3"; public string DropDownValue1 = "Game6"; public string DropDownValue2 = "Game5"; public string DropDownValue3 = "Game4"; } Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass Query2: How can I change the icon of the DDL, when the list is visible?We have created a sample based on your requirement where the dropdownlist icon is customized only when the list is opened. Please take a look at the sample to see how this customization has been implemented. If you have any further questions or need additional assistance, please feel free to reach out.Code Snippet[Counter.razor] @using Syncfusion.Blazor.DropDowns; @code { private SfDropDownList ddlObj; public string GameValue { get; set; } = "Game5"; public class Games { public string ID { get; set; } public string Text { get; set; } } List LocalData = new List { new Games() { ID= "Game1", Text= "American Football" }, new Games() { ID= "Game2", Text= "Badminton" }, new Games() { ID= "Game3", Text= "Basketball" }, new Games() { ID= "Game4", Text= "Cricket" }, new Games() { ID= "Game5", Text= "Football" }, new Games() { ID= "Game6", Text= "Golf" }, new Games() { ID= "Game7", Text= "Hockey" }, new Games() { ID= "Game8", Text= "Rugby"}, new Games() { ID= "Game9", Text= "Snooker" }, new Games() { ID= "Game10", Text= "Tennis"}, }; } Regards,Yohapuja SAttachment: Dropdown_style_icon_ffb9080b.zip

Hartmut · Answer

Dear Yohapuja,thank you for your suggestions. The solution for the first question works perfectly.Probably, my second question obviously was not clear. In my dropdown-list I have a down-arrow as icon.  I want to achive that the icon changes to an up-arrow, when the list-items are visible 
(see attached picture). Maybe you have a solution for this task.HartmutAttachment: DDL_b954148d.zip

Yohapuja Selvakumaran · Answer

Hi Hartmut,By default, our system supports the dropdown icon, which displays a downward arrow. However, in the two specific themes, namely "Material" and "Material3," the icon behavior differs. In these themes, when you open the dropdown list, the downward arrow transforms into an upward arrow.To utilize this functionality and render the component in one of these themes, you can refer to the following link in your layout file.[Layout.html] or Kindly check out the below demos for further reference.https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities?theme=material3 https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities?theme=material If you'd like to achieve this behavior in themes other than "Material" and "Material3," you will need to implement it manually by altering the icon when opening the popup. Below is a code snippet for your reference on how to accomplish this.Code Snippet @using Syncfusion.Blazor.DropDowns; @code { private SfDropDownList ddlObj; public string GameValue { get; set; } = "Game5"; public class Games { public string ID { get; set; } public string Text { get; set; } } List LocalData = new List { new Games() { ID= "Game1", Text= "American Football" }, new Games() { ID= "Game2", Text= "Badminton" }, new Games() { ID= "Game3", Text= "Basketball" }, new Games() { ID= "Game4", Text= "Cricket" }, new Games() { ID= "Game5", Text= "Football" }, new Games() { ID= "Game6", Text= "Golf" }, new Games() { ID= "Game7", Text= "Hockey" }, new Games() { ID= "Game8", Text= "Rugby"}, new Games() { ID= "Game9", Text= "Snooker" }, new Games() { ID= "Game10", Text= "Tennis"}, }; } Regards,Yohapuja S

Hartmut · Answer

Dear Yohapuja,

yesterday I checked only the attached sample, and that did not change the icon. Today I realized that the style that you provided above was not included in the sample. I added this and it works fine. Thank you very much.

Hartmut

Shereen Shajahan · Answer

Hi Hartmut,Glad to know your issue has been resolved. Please get back to us for assistance in the future.Regards,Shereen