Как стилизовать MVC3 / ASP.net DropDownList?

Question

Как я могу оформить DropDownList mvc3 / asp.net в css, как я могу с текстовым полем:

- Site.css - Стиль для текстового поля -

input[type="text"], 
input[type="password"] {
    border: 1px solid #93A9C8;
    padding: 2px;
    font-size: 1em;
    color: #444;
    width: 200px;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -o-border-radius: 3px 3px 3px 3px;

}

MVC3 Дисплей:

Answer 1

input[type="text"], 
input[type="password"],
select {
    border: 1px solid #93A9C8;
    padding: 2px;
    font-size: 1em;
    color: #444;
    width: 200px;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -o-border-radius: 3px 3px 3px 3px;

альтернативно, вы можете добавить стиль в выпадающий список:

@Html.DropDownListFor(m => m.ID, Model.MyList, new { @class="selectStyle" })

, чтобы вы могли сделать следующее в css:

.selectStyle { /* whatever */ }

Answer 2

В раскрывающемся списке отображается элемент «select», а не элемент «input», поэтому ваш CSS также должен будет включать «select».

Знайте также, что отборы иногда сложны для стиля. Большая часть их дизайна определяется платформой, а не CSS на странице. Есть несколько способов обойти это, самые элегантные из которых, как правило, простые jQuery plugins . Тот, который называется «Избранный», особенно хорош, на мой взгляд. Но имейте в виду, что скрытие стандартной функциональности select element может иногда вызывать проблемы с удобством использования на мобильных устройствах и других сенсорных интерфейсах. Поэтому протестируйте свои целевые платформы соответственно.

Answer 3

Добавить выберите в свой CSS.

Проверьте JSFiddle .