Css 如何使半透明select2？

我使用以下CSS使按钮看起来半透明-

.navbar-toggle {
    position:relative;
    float:left;
    display:block;
    padding: 9px 10px;
    background: rgba(0, 0, 0, 0.2);
    background-image: none;
    border: 0 none;
    top:0px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    outline: 0;
    opacity: 1;
    -webkit-transition: all .45s;
       -moz-transition: all .45s;
            transition: all .45s;
            float: left;
}

但当我将其应用于组件时，它并不能使其看起来透明。看起来select2应用了自己的主题并覆盖了我所做的。同时选择2，但要选择详细的文档

我应该如何更改select2样式，使其外观与按钮相同请参见

我已经尝试过：它可以正常工作

JS

CSS

我试过这个：效果好吗

JS

CSS

将select2放入容器中

<div class="nav-sel">SELECT2</div>

现在，选择2： 添加了很多透明背景和半透明背景

css

将select2放入容器中

<div class="nav-sel">SELECT2</div>

现在，选择2： 添加了很多透明背景和半透明背景

css

---

选择2可添加自己的html，以便在您设置错误html样式的情况下使用。使用Browsertool查看生成了哪些元素这是您要查找的吗？您可以添加容器和所有这些，但这很难。只需编辑select2类。我只是使用它的结构，并在上面应用自己的规则。我们都在等待着这个主题select2@Persijn，是的，这几乎就是我需要的。我还想要一个灰色/半透明的下拉列表。顺便说一句，使用当前样式选择2字体为白色-即你看不到你键入的内容。选择2会添加自己的html，因此可能是你设置了错误的html样式。使用Browsertool查看生成了哪些元素这是您要查找的吗？您可以添加容器和所有这些，但这很难。只需编辑select2类。我只是使用它的结构，并在上面应用自己的规则。我们都在等待着这个主题select2@Persijn，是的，这几乎就是我需要的。我还想要一个灰色/半透明的下拉列表。顺便说一句，用当前样式选择2字体为白色-即你看不到你键入的内容。谢谢！看起来不错。但奇怪的是，select2不起作用——只显示了一个元素。刚刚注意到我最初的小提琴也有同样的问题。添加这个css：.select2-container-open.select2下拉列表在{background:transparent；border:none；}span.select2-container.select2-container-themes-dark.select2-container-open{height:220px；}谢谢！看起来不错。但奇怪的是，select2不起作用——只显示了一个元素。刚刚注意到我最初的小提琴也有同样的问题。添加这个css：.select2-container-open.select2下拉列表在{background:transparent；border:none；}span.select2-container.select2-container-themes-dark.select2-container-open{height:220px；}非常感谢！太棒了。我已经更改了所选内容的颜色等，但不知道如何更改文本增强和下箭头的位置，显示为默认元素的下箭头应该垂直居中对齐。我似乎无法一蹴而就，但是可以通过设置：top:20px和line height:40px来正确设置箭头，但是小提琴看起来与我制作时不同。应该修改哪种样式来添加这些设置？这是新小提琴。它被修改到我认为是黑客的程度。我不知道为什么箭头会显示在左侧。非常感谢！太棒了。我已经更改了所选内容的颜色等，但不知道如何更改文本增强和下箭头的位置，显示为默认元素的下箭头应该垂直居中对齐。我似乎无法一蹴而就，但是可以通过设置：top:20px和line height:40px来正确设置箭头，但是小提琴看起来与我制作时不同。应该修改哪种样式来添加这些设置？这是新小提琴。它被修改到我认为是黑客的程度。我不知道为什么箭头显示在左侧。

html {
background:#505D6E url(http://habrastorage.org/files/a01/ca3/b36/a01ca3b360454f539b4275a3ad274c87.jpg) no-repeat center center fixed;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }

body {
    background:transparent;
    min-height:100%;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    line-height: 1.5em;
    font-size:14px;
    font-family: Helvetica, Arial, sans-serif;
    color:#fff;
    color:rgba(255,255,255,.8);
    font-weight: normal;
}

.mainmenu { z-index: 999999; width:100%;  padding: 30px 0 0 0;}
@media (min-width: 768px) {
    .mainmenu { position: fixed; }
}

.navbar-toggle, .themes-dark, .select2-container--themes-dark {
    position:relative;
    display:block;
    padding: 9px 10px;
    background: rgba(0, 0, 0, 0.2);
    background-image: none;
    border: 0 none;
    top:0px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    outline: 0;
    opacity: 1;
    -webkit-transition: all .45s;
       -moz-transition: all .45s;
            transition: all .45s;
            float: left;
}
select {
    height: 39px !important;
    width: 100px;
    margin: 8px 20px !important;
}

span.select2.select2-container.select2-container--themes-dark.select2-container--below, .select2-container--themes-dark {
margin-right: 20px !important;
margin-top: 8px;
height: 39px;
}

<div class="nav-sel">SELECT2</div>

.nav-sel {
   margin-top: 9px;
   margin-right: 15px;
   float: left;
}

.select2-container {
    background: transparent;
}

.select2-container .select2-selection {
    border: none;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
}

.select2-container .select2-selection span:first-child {
    color: white;
}

.select2-results ul li {
    color: white;
}

.select2-dropdown {
    background: rgba(0, 0, 0, 0.2);
}
.select2-search input:first-child {
    background: transparent;
}