Question

我在互联网上进行了广泛的搜索，但是没有找到任何有关如何设置表单中下拉列表的下拉部分样式的帮助。我希望指向正确的方向。感谢。

Answer 1

我一直在研究同样的问题。想出了一个非常简单的解决方案，使用一个比下拉本身短的持有者div。我还使用背景图像让下拉箭头看起来像我喜欢的样子。查看http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

你需要的只是一个围绕select标签的div和2个CSS类。

HTML：

<div class="mainselection">
<select name="State" id="input7">
    <option></option>
    <option value="Alabama">Alabama</option>
    ...
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>                              
</select>
</div>

CSS：

.mainselection {
    overflow:hidden;
    width:350px;
    margin-left:35px;
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
    /* dropdown_arrow.png is a 31x28 image */
}
select {
    border:0;
    background:transparent;
    height:32px;
    border:1px solid #d8d8d8;
    width:350px;
    -webkit-appearance: none;
}

然后经过一点点Javascript验证后，我还可以将div上的类切换到.dropdownbad以给它一个红色边框。

.dropdownbad {
    border:2px solid #c13339;
}

此处显示默认和错误状态：

enter image description here

Answer 2

您可以使用SELECT选择器应用样式或将类名应用于SELECT元素。但是，你会遇到IE＆lt;的问题。 8将元素等边框应用于元素。

然后，您可以使用OPTION选择器来定位选项。

SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }

应该使用粗体文本为您提供带红色边框的下拉菜单（如果在标准模式下使用FF或IE8），并且选项应为绿色背景的斜体。

Answer 3

它可能，但至少可以说是错综复杂的。实际上，您不能在不同浏览器中对下拉列表的下拉部分进行样式设置，因为它们都以不同的方式支持它们（我的意思是真正多样化的支持）。

几个月前，当我遇到这样的问题时，我发现的唯一解决方案是使用javascript将下拉列表转换为ul / li下拉菜单，我可以设置样式。当然，有许多事件需要处理，比如选择一个值。

幸运的是，有一个JQuery插件允许这是一项微不足道的任务。（此插件的给定Brainfault链接不再有效。）

Answer 4

查看此网站以获取仅限CSS的解决方案： http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML：

<form>
    <select>
        <option>CSS</option>
        <option>HTML </option>
        <option>HTML 5</option>
    </select>
</form>

CSS：

<style>
    select {
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none; /* Removes Default Firefox style*/
        background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
        width: 100px; /*Width of select dropdown to give space for arrow image*/
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        color: #FFF;
        border-radius: 15px;
        padding: 5px;
        box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
    }
</style>

Answer 5

如上所述，使用直接html几乎是不可能的，但我在jQuery Combobox上取得了不错的成绩。

Answer 6

自从提出这个问题以来，浏览器技术已经有了很大改进。您现在可以完全使用没有javascript的CSS创建自定义下拉菜单。

查看此博文： http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 7

如果没有选中，我的购物车中的下拉列表是浅灰色的。我能用这个把文字变成黑色：

#customer_details ul {
color: black !important;
}

这就是我需要改变的全部，所以我不能说你还能做些什么。

如何设置表单下拉列表的样式？

7 个答案: