完全透明的选择框

在我的模板中，我有背景图像和选择框的形式，我想使整个选择框选项透明，这样用户可以在选择框中看到背景图像，我尝试了下面的代码但它不起作用，任何人都可以引导我走向正确的方向吗？完全透明的选择框

演示代码

body{ 
 
    color:#fff; 
 
} 
 
    .content{ 
 
    min-height: 400px; 
 
    background-image: url('http://www.planwallpaper.com/static/images/twe_background-1920x1080.jpg'); 
 
    } 
 

 
select{ 
 
    background-color:#000; 
 
    -moz-opacity:.40; 
 
    opacity:.40; 
 
} 
 

 
select option{ 
 
    background-color: #000; 
 
    filter:alpha(opacity=40); 
 
    -moz-opacity:.40; 
 
    opacity:.40; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="content"> 
 
    <h1>Content heading.</h1> 
 
    <p>Content body</p> 
 

 
    <select class="form-control"> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    </select> 
 
    </div> 
 
    </body>

来源

2017-03-06 Vishal Panara

透明度将一个元素，它的所有子元素不透明，包装在使用类名称“背景” div元素的不透明的内容，应用背景图像 - 然后应用不透明的类'内容'。

body { 
 
    color: #fff; 
 
} 
 

 
.content { 
 
    -moz-opacity: .40; 
 
    opacity: .4; 
 
} 
 

 
.background { 
 
    min-height: 400px; 
 
    background-image: url('http://www.planwallpaper.com/static/images/twe_background-1920x1080.jpg'); 
 
} 
 

 
select { 
 
    background-color: #000; 
 
} 
 

 
select option { 
 
    background-color: #000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="background"> 
 
    <div class="content"> 
 
     <h1>Content heading.</h1> 
 
     <p>Content body</p> 
 

 
     <select class="form-control"> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    <option>lorem lipsum</option> 
 
    </select> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-03-06 05:18:53 Inkdot

我看不到透明度下拉 –

哦，我明白了，这会有点棘手。我建议创建一个自定义选择/下拉菜单，而不是覆盖每个浏览器的默认输出。 – Inkdot

据我所知，你在找什么不能与内置的CSS来完成。 select的css可以更改，但select option的css自定义仅限于background-color和color，可能还有更多。这是因为选项的样式是由浏览器处理的。

但是和往常一样，你可以使用一个模拟选择框的jquery插件。然后疯狂定制。一个非常好的插件是Select2

来源

2017-03-06 05:39:20

完全透明的选择框

回答

相关问题