[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Style a @Html.DropDownListFor in ASP.NET

Posted on 2012-09-13
Medium Priority
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 44

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 38398472
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 60

Expert Comment

by:Julian Hansen
ID: 38398556
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
ID: 38400551
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


Author Comment

ID: 38407307
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month20 days, 7 hours left to enroll

867 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