asked on

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!

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Or if you specifically want to target only that select then

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

Open in new window

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

Alan

jeffiepoo

ASKER

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