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'>
            <p>
            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")
            </p>
        </div>

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.

Help!

In case your curious, here are my styles:

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

Open in new window



Please help me style these elements!
LVL 6
jeffiepooAsked:
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; }
0
 
Julian HansenCommented:
Or if you specifically want to target only that select then

.dropdownField select {
  /* Add styles here */
}

Open in new window

0
 
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

Alan
0
 
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.

Thanks,

-Jeff
0
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.