如何制作半透明的select2？

Question

我使用以下 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 组件时，它并没有使它看起来透明。看起来 select2 应用了自己的主题并覆盖了我所做的。 Select2 也有supports themes，但是有详细的文档is missing。

我应该如何更改 select2 样式以使其看起来与按钮相同（请参阅jsfiddle demo）

Answer 1

我试过这个：http://jsfiddle.net/crxepevy/1/ 它工作正常吗？

JS

var data = [{
    id: 0,
    text: 'enhancement'
}, {
    id: 1,
    text: 'bug'
}, {
    id: 2,
    text: 'duplicate'
}, {
    id: 3,
    text: 'invalid'
}, {
    id: 4,
    text: 'wontfix'
}];


$(".js-example-data-array").select2({
    data: data,
    theme: "themes-dark"
});

CSS

<body>
<nav class="mainmenu">
    <div class="container">
        <div class="navbar-right">
            <select class="js-example-data-array themes-dark"></select>
            <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-search fa-lg fa-fw"></i></font>
            </button>
            <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-play fa-lg fa-fw"></i></font>
            </button>
            <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-vk fa-lg fa-fw"></i></font>
            </button>
        </div>
    </div>
</nav>

CSS

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;
}

Answer 2

Fiddle

将 select2 放入容器中。

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

有了这个，你可以让它看起来像一个带有 css 的 bootstrap 2 nav 元素：

css

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

现在选择 2： 添加了大量透明背景和半透明背景。

css

.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;
}