How to set styles for DropDownList controls (ASP. NET MVC)

Previous words:

In response to school leadership requirements, to add a search function to the backend management system, provide optional options. I choose to use DropDownList to achieve, familiar with the. NET control know, DropDownList look very ugly, whether it is the border length or the inside of the drop-down triangle, all give people very uncomfortable feeling, as a beauty girl, how can tolerate it!!!

Problem Description:

And then began to look for a variety of data to find a solution, first affixed to the appearance of no beautification

The length of the dropdown box is determined by the maximum length of the selected item, so it's really ugly!

Here's the code,

<liclass="List-group-item">                @{                    if(@ViewBag. Key! ="")                    {                        <input type="text"Name="Key"[Email protected]class="Form-control no-padding-hr"style="border-radius:0;"/>                    }                    Else                    {                        <input type="text"Name="Key"Placeholder="Please enter the name of the unit you want to search ..." class="Form-control no-padding-hr"style="border-radius:0;"/>                    }                }            </li> <liclass="List-group-item">@Html. Dropdownlistfor (Model= Model.companynature, viewbag.companynature asIenumerable<selectlistitem>)            </li> <liclass="List-group-item">@Html. Dropdownlistfor (Model= Model.companybusiness, viewbag.companybusiness asIenumerable<selectlistitem>)                            </li>

We're not going to be able to style it right here.

Find a solution on the Internet, some suggestions directly with <select class= "" ></select> tags, so that the choice of items will be directly in this tag manually write the selection, and to change the more than hit And some of them go straight into the. js file to change the style, but for the novice like me, this seems to be not feasible.

Then I examine the elements in the page to find out the HTML code it generated is actually a select

So I thought that since I can't add styles directly and rudely, can I add a style to the <select> tag through jquery and try it out?

It's easy to add two or three lines of code.

$ (document). Ready (function() {            $ (' select '). AddClass ("Form-control");        });

The meaning of this code is to add a style named Form-control to the Select tag when the page is loaded.

Bootstrap is a thing that can not be better, with bootstrap written page concise beautiful Beautiful, it provides a lot of classes, the above used Form-control is bootstrap class library provided, the final effect is as follows

It's more comfortable. There is no, neat and beautiful, the implementation method is very simple

If you want more beautiful effects, such as color settings and so on, you can write a style, and then use the same method to add the better. (When I realized that the moment was simply happy to not!) ）

How to set styles for DropDownList controls (ASP. NET MVC)