How to Set Font-Family in HTML Select Dropdown List in Ie

Setting font-family in select options doesn't work for Chrome and IE browsers

The options tags are created by the browsers UI styles and are hard and inconsistent to style. You would either want to use some javascript, build it as something other than a select (such as a list) or my preference, leave it as the browser default.

How can I change the font-size of a select option?

Add a CSS class to the <option> tag to style it: http://jsfiddle.net/Ahreu/

Currently WebKit browsers don't support this behavior, as it's undefined by the spec. Take a look at this: How to style a select tag's option element?

Setting the height of a SELECT in IE

There is no work-around for this aside from ditching the select element.

How do I change the font-size of an option element within select ?

One solution could be to wrap the options inside optgroup:

optgroup { font-size:40px; }

<select>
  <optgroup>
    <option selected="selected" class="service-small">Service area?</option>
    <option class="service-small">Volunteering</option>
    <option class="service-small">Partnership & Support</option>
    <option class="service-small">Business Services</option>
  </optgroup>
</select>

IN MVC it possible to change the font per list item in @Html.DropDownListFor (Create a font dropdown list similar to MS office

Thanks All,

After doing some workaround now able find the way to do this in mvc (Browser-Chrome),

I have write one custom html helper which extends @Html.DropDownListFor, And in that i did some customization in HTML to be rendered,

VIEW,

              //Reference for customcontrol class
               @using WEB_PDD_MVC.CustomHelpers
               <div>
                @{
                List<SelectListItem> fonts = (List<SelectListItem>)ViewBag.vFontlIst;
                foreach (SelectListItem item in fonts)
                {
                    if (item.Text == Model.Font)
                    {
                        item.Selected = true;                       
                    }
                    else
                    {
                        item.Selected = false;
                    }
                }
                                        }
                        @Html.ExtendedDropDownListFor(model => model.Font, fonts,null, new { style = "width: 100px;", id = "ddlFontDropDownList" })
                    </div>

Controller,

                    List<SelectListItem> liFonts = new List<SelectListItem>();
                    liFonts.Add(new SelectListItem { Text = "nimbus-sans-condensed", Value = "nimbus-sans-condensed" });
                   //For now selecting only 10 fonts.
                    foreach (FontFamily font in System.Drawing.FontFamily.Families.Take(10))
                    {
                        liFonts.Add(new SelectListItem { Text = font.Name, Value = font.Name });
                    }
                    ViewBag.vFontlIst = liFonts;

For customdropdown class create a new folder,CustomHelpers and add new class file CustomDropDownList in it, add below methods in it,they will do the rest,

       public static MvcHtmlString ExtendedDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)
        {
            return SelectInternal(htmlHelper, optionLabel, ExpressionHelper.GetExpressionText(expression), selectList, false /* allowMultiple */, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
        }
        private static MvcHtmlString SelectInternal(this HtmlHelper htmlHelper, string optionLabel, string name, IEnumerable<SelectListItem> selectList, bool allowMultiple, IDictionary<string, object> htmlAttributes)
        {
            string fullName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
            if (String.IsNullOrEmpty(fullName))
                throw new ArgumentException("No name");

            if (selectList == null)
                throw new ArgumentException("No selectlist");

            object defaultValue = null;

            // If we haven't already used ViewData to get the entire list of items then we need to
            // use the ViewData-supplied value before using the parameter-supplied value.
            if (defaultValue == null)
                defaultValue = htmlHelper.ViewData.Eval(fullName);

            if (defaultValue != null)
            {
                IEnumerable defaultValues = (allowMultiple) ? defaultValue as IEnumerable : new[] { defaultValue };
                IEnumerable<string> values = from object value in defaultValues select Convert.ToString(value, CultureInfo.CurrentCulture);
                HashSet<string> selectedValues = new HashSet<string>(values, StringComparer.OrdinalIgnoreCase);
                List<SelectListItem> newSelectList = new List<SelectListItem>();

                foreach (SelectListItem item in selectList)
                {
                    item.Selected = (item.Value != null) ? selectedValues.Contains(item.Value) : selectedValues.Contains(item.Text);
                    newSelectList.Add(item);
                }
                selectList = newSelectList;
            }

            // Convert each ListItem to an <option> tag
            StringBuilder listItemBuilder = new StringBuilder();

            // Make optionLabel the first item that gets rendered.
            if (optionLabel != null)
                listItemBuilder.Append(ListItemToOption(new SelectListItem() { Text = optionLabel, Value = String.Empty, Selected = false }));

            foreach (SelectListItem item in selectList)
            {                
                listItemBuilder.Append(ListItemToOption(item));
            }

            TagBuilder tagBuilder = new TagBuilder("select")
            {
                InnerHtml = listItemBuilder.ToString()
            };
            tagBuilder.MergeAttributes(htmlAttributes);
            tagBuilder.MergeAttribute("name", fullName, true /* replaceExisting */);
            tagBuilder.GenerateId(fullName);
            if (allowMultiple)
                tagBuilder.MergeAttribute("multiple", "multiple");

            // If there are any errors for a named field, we add the css attribute.
            ModelState modelState;
            if (htmlHelper.ViewData.ModelState.TryGetValue(fullName, out modelState))
            {
                if (modelState.Errors.Count > 0)
                {
                    tagBuilder.AddCssClass(HtmlHelper.ValidationInputCssClassName);
                }
            }

            tagBuilder.MergeAttributes(htmlHelper.GetUnobtrusiveValidationAttributes(name));

            return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
        }

        internal static string ListItemToOption(SelectListItem item)
        {
            TagBuilder builder = new TagBuilder("option")
            {
                InnerHtml = HttpUtility.HtmlEncode(item.Text)
            };
            if (item.Value != null)
            {
                builder.Attributes["value"] = item.Value;
                //builder.Attributes["style"] = "background-color:Gray;";
            }
            if (item.Selected)
            {
                builder.Attributes["selected"] = "selected";
            }
           // builder.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(item.htmlAttributes));

            TagBuilder OptGroup = new TagBuilder("optgroup ")
            {
                InnerHtml = builder.ToString(TagRenderMode.Normal)
            };

            OptGroup.Attributes["style"] = "display:none;font-family:" + item.Value + ";";

            return OptGroup.ToString(TagRenderMode.Normal);
        }