We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I change the font family of a selected DropDownList item ?


The following code change only the DropDownList item's font but not the selected text.

Meaning: after selecting one item, the dropdown item closed and then we can see the selected item - this one is not with the correct font family.

    .ddlFont { font-family: Arial; }

<ej:DropDownList ID="DropDownList1" runat="server" CssClass="ddlFont">
        <ej:DropDownListItem Text="English" Value="en-US" />
        <ej:DropDownListItem Text="Arabic" Value="ar-AR" />


2 Replies

TO tomer August 30, 2017 03:02 PM UTC

I noticed that this issue occurred only on my Firefox (version: 55.0.3)

PO Prince Oliver Syncfusion Team August 31, 2017 06:29 AM UTC

Hi Tomer, 

Thank you for contacting Syncfusion forums. 

To change the font family of a selected DropDownList item, you need to override the existing default font family for the visible input element. Kindly refer to the following code snippet. 

    .ddlFont, .ddlFont.e-ddl .e-input { font-family: Arial; } 

We have prepared a sample for your convenience, kindly refer to the following link for the sample: https://www.syncfusion.com/downloads/support/forum/132399/ze/DropDownSample-715200558 


Live Chat Icon For mobile
Up arrow icon