如何給DropDownList控件設置樣式（ASP.NET MVC）

前話：

應學校領導要求，要給后台管理系統添加一個搜索功能，提供可選擇選項。我選擇使用DropDownList去實現，熟悉.net控件的都知道，DropDownList的樣子非常丑，不論是邊框長寬還是里面的下拉三角形，都給人很不舒服的感覺，作為一個愛美的女生，怎么可能容忍呢！！！

問題描述：

然后就開始各種查資料找解決方法，先貼沒有美化的樣子

 

下拉框的長度是根據選擇項里長度最大的文本決定的，這樣真的很丑有沒有！

下面是代碼，

<li class="list-group-item">
                @{
                    if (@ViewBag.key != "")
                    {
                        <input type="text" name="key" value=@ViewBag.key class="form-control no-padding-hr" style="border-radius: 0;" />
                    }
                    else
                    {
                        <input type="text" name="key" placeholder="請輸入待搜索單位名稱..." class="form-control no-padding-hr" style="border-radius: 0;" />
                    }
                }
            </li>

            <li class="list-group-item">
                @Html.DropDownListFor(model => model.CompanyNature, ViewBag.CompanyNature as IEnumerable<SelectListItem>)
            </li>

            <li class="list-group-item">
                @Html.DropDownListFor(model => model.CompanyBusiness, ViewBag.CompanyBusiness as IEnumerable<SelectListItem>)
                
            </li>

 

 

我們並不能直接在這里面給它設置樣式

在網上找解決方法，有些建議直接用<select  class=””></select>標簽，這樣的話選擇項就要直接在這個標簽中手動寫選擇項，而且要改動的也比較打；還有些呢是直接進入.js文件去改樣式，但是對於我這樣的新手來說，這個好像不太可行。

然后我在頁面中審查元素發現它生成的Html代碼實際上還是Select

 

所以我就想到既然不能直接簡單粗暴的添加樣式，那能不能通過jQuery去給<select>標簽添加樣式呢，想到就試一下

很簡單的加了兩三行代碼

$(document).ready(function(){

            $('select').addClass("form-control");

        });

這段代碼的意思呢是在頁面加載的時候就為select標簽添加名為form-control的樣式。

BootStrap是個簡直不能更贊的東西了，用BootStrap寫出來的頁面簡潔美觀漂亮，它給提供了很多類，上面使用的form-control就是BootStrap類庫中提供的，最后效果如下

 

這樣就舒服多了有沒有，整齊美觀，實現方法也很簡單

如果還想要更美的效果，比如顏色設置等等，可以自己寫一個樣式，然后用同樣的方法加上就好了。（當我實現的那一刻簡直開心到不行！）