Style a @Html.DropDownListFor in ASP.NET

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!
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
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; }
Julian HansenCommented:
Or if you specifically want to target only that select then

.dropdownField select {
  /* Add styles here */

Open in new window

Alan WarrenApplications DeveloperCommented:
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

jeffiepooAuthor Commented:
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.


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.