Can I add html or css classes to @Html.DropDownListFor items

Question

I want a DropDownList that allows users to select a colour. I would like to add a coloured square to the dropdownlist item or colour the text the appropriate colour.

I am populating the DropDownList as in the code below:

Controller:

List<SelectListItem> colourSelectList = new List<SelectListItem>();
colourSelectList.Add(new SelectListItem() { Text = "Blue", Value = "blue" });
colourSelectList.Add(new SelectListItem() { Text = "Red", Value = "red" });
colourSelectList.Add(new SelectListItem() { Text = "Green", Value = "green" });
colourSelectList.Add(new SelectListItem() { Text = "Purple", Value = "purple" });
colourSelectList.Add(new SelectListItem() { Text = "Grey", Value = "grey" });
colourSelectList.Add(new SelectListItem() { Text = "Yellow", Value = "yellow" });

ViewData["ColourSelectList"] = colourSelectList;

View:

<div class="form-group">
    <label class="col-md-3 control-label">Colour<span class="required"> * </span></label>
    <div class="col-md-3">
        @Html.DropDownListFor(m => m.MetronicBrandColour, ViewData["ColourSelectList"] as IEnumerable<SelectListItem>, " --- Select Colour --- ", new { @class = "form-control" })
    </div>
</div>

All works as expected but I'd like the combobox to look like this mock up:

So, is it possible to do this or - just just set the font color somehow?

who needs a list :) mjolnic.com/bootstrap-colorpicker

JamieD77
– JamieD77

2015-10-07 19:13:07 +00:00
Commented Oct 7, 2015 at 19:13 — JamieD77
– JamieD77, Commented Oct 7, 2015 at 19:13

Chris Pratt · Accepted Answer · 2015-10-07 17:39:46Z

4

Html.DropDownListFor provides no ability to modify the actual option elements that are generated. You can only apply classes and other attributes to the parent select element.

If you need to modify the option elements, you'll have to construct your select manually:

<select id="@Html.IdFor(m => m.Foo)" name="@Html.NameFor(m => m.Foo)">
    @foreach (var option in Model.FooSelectList.Items)
    {
        <option class="..." value="@option.Value" @(option.Selected ? "selected=\"selected\"" : string.Empty)>@option.Text</option>
    }
</select>

If it's something you plan to use frequently, then you can setup either an HtmlHelper extension or an editor template to handle this construction automatically.

answered Oct 7, 2015 at 17:39

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Percy · Accepted Answer · 2015-10-08 10:01:06Z

I couldn't get the exact answer (with the coloured box next to the text) but I was able to change the option text colour by using javascript:

<script type="text/javascript">
    $(function () {
        $("#cmbColour > option").each(function () {
            switch(this.value)
            {
                case "blue":
                    $(this).addClass("cmbBlue");
                    break;
                case "red":
                    $(this).addClass("cmbRed");
                    break;
                case "green":
                    $(this).addClass("cmbGreen");
                    break;
                case "purple":
                    $(this).addClass("cmbPurple");
                    break;
                case "grey":
                    $(this).addClass("cmbGrey");
                    break;
                case "yellow":
                    $(this).addClass("cmbYellow");
                    break;
            }
        });
    });
</script>

and the CSS:

.cmbBlue {
    color: #89C4F4;
}

.cmbRed {
    color: #F3565D;
}

.cmbGreen {
    color: #1bbc9b;
}

.cmbPurple {
    color: #9b59b6;
}

.cmbGrey {
    color: #95a5a6;
}

.cmbYellow {
    color: #F8CB00;
}

You can change the background-color using this method but it was too busy in the UI so I went for the text colour.

I did try to use the jQuery .append to insert a div into the option, which worked but it seemed to ignore any css applied directly to it.

This is how it looks:

Serhiy Chupryk · Accepted Answer · 2015-10-07 17:30:16Z

0

You can set a background-color for each option. Don't forget to set (foreground) color to white when background is too dark.

Also you can add a div that will represent your selected color but this div will be next to your select tag. If you really want to have that color displayed like it hovers above the select, then you need to change its position and z-index with css. Please let me know if you need the exact code and style for this

answered Oct 7, 2015 at 17:30

Serhiy Chupryk

4362 gold badges5 silver badges15 bronze badges

1 Comment

Percy Over a year ago

Hi, How do I add a background-color for each option when using the DropDownListFor? some code example would be great thanks.

Collectives™ on Stack Overflow

Can I add html or css classes to @Html.DropDownListFor items

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related