HTML选择具有多种颜色的下拉列表答案

【问题标题】：HTML Select DropDown list with multiple coloursHTML选择具有多种颜色的下拉列表
【发布时间】：2010-04-27 10:57:43
【问题描述】：

下拉列表中的不同项目可以有不同的颜色吗？

例如：

选项 1 = 绿色
选项 2 = 蓝色
等等

【问题讨论】：

可以，在css的选项标签中使用class或id

标签： html colors html-select

【解决方案1】：

这就是你想要的Styling Dropdown Lists

    <style type="text/css">
    option.red {background-color: #cc0000; font-weight: bold; font-size: 12px;}
    option.pink {background-color: #ffcccc;}
    </style>

    <select name=colors>
    <option class="red" value= "../getting_started/">Getting Started </option>
    <option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML
     </option>
    </select>

【讨论】：

如果我以这种方式从列表中填充下拉列表会怎样：'@Html.DropDownListFor(m => m.ModActionCatList, actionCatList, new { @class= "select2-select-00 col-md-12 full-width-fix required" ...'
也许有人可以帮助解决一些困惑，我查了<Style tyle=，但没有找到任何结果。我刚刚对此进行了测试，即使您删除了tyle，颜色也可以正常工作，而将第一行改为<style =text/css>

【解决方案2】：

CSS 和 HTML

#option-1 {
  color: red;
}
#option-2 {
  color: green;
}

#option-3 {
  color: yellow;
}

#option-4 {
  color: blue;
}

<select>
  <option id="option-1">Option 1</option>
  <option id="option-2">Option 2</option>
  <option id="option-3">Option 3</option>
  <option id="option-4">Option 4</option>
</select>

【讨论】：

【解决方案3】：

我猜你的意思是select？这应该有效：

option:nth-child(1) { background: green; }
option:nth-child(2) { background: blue; }

等

【讨论】：

遗憾的是:nth-child 在 IE 中不起作用（并且在其他一些浏览器中存在问题）。
这是一个仍在开发中的 CSS3 选择器，尚未在所有主流浏览器中正确实现。

【解决方案4】：

                    <div class="col-lg-3">
                        <label>Job Status:</label>
                        <select type="text" name="fname" class="form-control"  placeholder="Job Status" >
                                <option value="">Select Status</option>
                                <option class="btn btn-success"  value="Working">Working</option>
                                <option class="btn btn-warning"  value="In Proccess">In Proccess</option>
                                <option class="btn btn-danger" value="Closed">Closed</option>
                        </select>
                    </div>

【讨论】：

虽然这段代码可以解决问题，包括解释如何以及为什么解决问题将真正有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而不仅仅是为提问的人。考虑编辑您的答案以添加解释和/或更多关于为什么您的解决方案比其他解决方案更好的见解。见how to answer。