CODEWITHSUNDEEP
c#cssasp.net-mvc
Percy
Percy

Reputation: 3125

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

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:

Combo mock up

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

Upvotes: 0

Views: 2300

Answers (3)

Percy
Percy

Reputation: 3125

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:

result

Upvotes: 1

Chris Pratt
Chris Pratt

Reputation: 239430

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.

Upvotes: 4

Serhiy Chupryk
Serhiy Chupryk

Reputation: 438

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

Upvotes: 0

Related Questions