Style a @Html.DropDownListFor in ASP.NET

Posted on 2012-09-13
Last Modified: 2012-09-22
Hey Experts,

I have the following code in my Razor view in an ASP.NET MVC 3 project:

        <div class='dropdownField'>
            Inquiry Type:
            @Html.DropDownListFor(x=>x.InquiryType, new[] {
                new SelectListItem() {Text = "Gig Inquiry", Value = "Gig"},
                new SelectListItem() {Text = "Fanmail", Value = "Fan"},  
                new SelectListItem() {Text = "Webmaster", Value = "Web"},  
                new SelectListItem() {Text = "Other", Value = "Other"}
            }, "Choose an Option")

Open in new window

So, 'Choose an Option, Gig Inquiry, Fanmail, Webmaster, or Other' aren't styled. How can I make it so I can style these elements in my webform?

The <p></p> tags have a font-family applied to them but anything in the @Html.DropDownListFor doesn't inherit these styles.


In case your curious, here are my styles:

    margin: 30px 0px 20px 0px !important;
h1, p
    font-family: 'Belgrano', arial; 

Open in new window

Please help me style these elements!
Question by:jeffiepoo
    LVL 42

    Accepted Solution

    A dropdown list in HTML is a SELECT element, so you need to style it accordingly.

    select { border: 1px solid red; }
    select option { color: blue; }
    LVL 49

    Expert Comment

    by:Julian Hansen
    Or if you specifically want to target only that select then

    .dropdownField select {
      /* Add styles here */

    Open in new window

    LVL 26

    Expert Comment

    by:Alan Warren
    You can create a new css class for the MVC:
    css ( new { @class = "dropdownField" } )

    Drop down list styling, can't get the padding right
    Styles.Render in MVC4

    LVL 6

    Author Comment

    ChrisStanyon, thanks again!

    alanwarren, would I write this in a <script> tag? Could you include your code line in my HTML snippet above so I know how this is implemented? I can see if this works too.



    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Suggested Solutions

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now