クリック後、選択ボックスでブートストラップの選択が消えます。マウスのホバーでのみ表示

Question

私はページにいくつかの選択ボックスを持っています。唯一の問題は、値を選択すると空白になります。マウスの上にマウスを置くだけで見ることができます。

この

は、クリックする前に、次のとおりです。これは、ドロップダウンをクリックした後で

ここ

私は '学士' 選択しているとそれが目に見えるのです

画面上のどこかをクリックすると消えます！マウスホバーで

は、それが再表示されます！私は正直にこれを引き起こしているのか分からない

<div class="form-group"> 
      <label class="col-md-4 control-label">Degree</label> 
      <div class="col-md-4 selectContainer"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span> 
        <select name="degreeselect" class="form-control selectpicker"> 
         <option value=" " selected disabled>Select Degree</option> 
         <option>Bachelors</option> 
         <option>Masters</option> 
         <option>Doctorate</option> 
        </select> 
       </div> 
      </div> 
     </div> 

：ここ

は、選択ボックスのための私のdiv要素です。

Answer 1

自己への注意：CSSの変更に注意してください！

私のスタイルシートは、ドロップダウンボタン付きのブートストラップナビバーがある別のページから取得されました。背景色が青色で、テキストが白いところでカスタマイズしました。

私は私のブラウザでページを検査し、これを見つけた：とても小さい

.dropdown-toggle { 
    color: #fff; 
} 

何かがこのような巨大な頭痛を引き起こしたが、私はそれを考え出しました！