如何風格MVC3/ASP.net DropDownList？

我如何風格的CSS一個MVC3/asp.net的DropDownList像我可以用文本框：如何風格MVC3/ASP.net DropDownList？

--Site.css - 樣式文本box--

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顯示：

enter image description here

來源

2011-09-28 JaJ

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 */ }

來源

2011-09-28 23:57:23 jzm

選擇添加到您的CSS。

查看JSFiddle。

來源

2011-09-28 23:50:16

下拉列表呈現一個「選擇」元素，而不是一個「輸入」元素，讓你的CSS必須包括「選擇」爲好。

也知道選擇有時是出了名的難風格。他們的大部分設計都是由平臺管理的，而不是頁面上的CSS。有很多方法可以解決這個問題，其中最優雅的通常是簡單的jQuery plugins。在我看來，名爲「Chosen」的那個特別好。但要知道，模糊的標準選擇元素的功能有時會導致在移動設備和其他觸摸界面的可用性問題。所以相應地測試你的目標平臺。

來源

2011-09-28 23:50:37 David

如何風格MVC3/ASP.net DropDownList？

回答

相關問題