Bootstrap <option> rgba color

4

我希望有人能帮助我解决这个问题,我对尝试弄清楚这个问题感到沮丧。目前,我有一个使用bootstrap的表单。我能够为我的 CSS样式:

select {
    background-color: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
    min-height: 30px !important;
    padding-right: 6px !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s !important;

}

这是它的外观:

enter image description here

现在,这是我目前拥有的选项标签内容:
选项CSS:
select option {
            width: 100%;
    background-color: rgba(0,0,0,0.35) !important;

          -webkit-appearance: none;            /*Removes default chrome and safari style*/
      -moz-appearance: none;             /* Removes Default Firefox style*/
}

这是它的样子:

enter image description here

我使用 ulli 重新创建了相同的东西:

ul.dropdown{ 
    display: block;
    position: relative;
    width: 100%;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
ul.dropdown ul {
    width: 100%;
    background-color: rgba(0,0,0,0.35) !important;
    visibility: hidden; 
    position: absolute;
    list-style-type: none;
    top: 100%;
    left: 0; 
    padding: 0px;
}

我希望选择/选项看起来像这样:

enter image description here

问题:

1)在Bootstrap或Chrome中是否有默认的背景设置,当应用RGBA时,它就覆盖了它,如果有,如何删除它,使其看起来像ul / li设计?

2)是否有一个jQuery插件可以应用于ul / li,以模拟select / option功能?

所有我找到的都使用select/option并具有有限的样式,而且我担心Bootstrap的样式会干扰

谢谢你的帮助。

1个回答

1

Bootstrap将.dropdown-menu类应用于转换为ul的选择器。因此,您可以简单地覆盖该类。

ul.dropdown-menu
{
  background-color: brown;
}

ul.dropdown-menu li a:hover
{
 background-color: orange; 
}

例子:http://jsfiddle.net/dJDHd/1365/


正是我所需要的,谢谢! - user247326

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接