1. Home
  2. Forum
  3. Blazor
  4. Styling dropdown list

Styling dropdown list

Hello.

How can I apply styles to SfDropDownList so that I can achieve the same effect as 

<b>Records:</b> 
<select  style="color: white; background-color: black; font-family: 'Century Gothic'; font-size: 12">
<option selected value="0">--- Select a valid option ---</option>
<option style="color: blue" value="1">This is option 1</option>
<option style="background-color: red; font-family: System; font-size: 9" value="2">This is option 2</option>
<option value="3">This is option 3</option>
</select>
<span style="color:#F00; font-style:italic;">(mandatory)</span>

Thank you.



1 Reply
BS Buvana Sathasivam Syncfusion Team September 9, 2022 04:19 PM UTC

Hi Paulo,


Yes we can override the existing styles and set css classes to each li separately using template functionality of the dropdown list component . Kindly refer to the attached sample and demo links for your reference.




Demo Link : https://blazor.syncfusion.com/demos/dropdown-list/template?theme=fluent 


Docs : https://blazor.syncfusion.com/documentation/dropdown-list/getting-started 

Thanks,

Deepak R.


Attachment: BlazorApp1_4b7ecf1e.zip

Loader.
Up arrow icon