完全に透明な選択オプションボックス

私のテンプレートでは、背景画像と選択オプションボックスを持つフォームがあります。選択オプションボックス全体を透明にしたいので、選択オプションボックスで背景画像も見ることができます。しかし、それは動作していない、いずれかの正しい方向に私を導くことができますか？完全に透明な選択オプションボックス

デモコード

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要素であなたの不透明なコンテンツをラップし、背景を適用しますそのイメージをクラス 'content'に不透明度を適用します。

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

完全に透明な選択オプションボックス

答えて

関連する問題