Question

在我的模板中我有选择选项框的背景图片和表单，我想让整个选择框透明，这样用户也可以在选择框中看到背景图片，我尝试了下面的代码，但它不能正常工作，任何人都可以指导我正确的方向吗？

演示代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

不透明度会使元素及其所有子元素变得不透明，将不透明内容包装在具有类名＆＃39;背景＆＃39;的div元素中，将背景图像应用于该元素 - 然后将不透明度应用于类＆＃39;内容＆＃39;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

完全透明的选择选项框

2 个答案: