選択の背景色を変更する

Question

Image problem

私はそれを選択しました。それは私の構造を変更することはできませんので、Googleの翻訳の選択です（div内の選択）です。私は他の色のオプションを置くと青の色を変更したい

<div onclick="translate()" id="google_translate_element"></div> 

：しかし、私は何を選択し、そのクラス（「.goog-TE-コンボ」）知っています。

私はSelect2またはChosenを使用しようとしましたが、動作させることはできません。

全コード（たぶん私はどのように正しくインポートライブラリことを知らないので）：あなたはCSSでそれを達成することができます

<div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
    <div id=":0.targetLanguage"> 
    <select class="goog-te-combo"> 
     <option value="">Seleccionar idioma</option> 
     <option value="zh-CN">chino (simplificado)</option> 
     <option value="fr">francés</option> 
     <option value="en">inglés</option> 
     <option value="it">italiano</option> 
     <option value="vi">vietnamita</option> 
     </select> 
    </div> 
</div> 

Answer 1

。

.select2-results__option--highlighted { 
 
     background-color: #BADA55 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
    <div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
 

 

 
    
 
    <div id=":0.targetLanguage"> 
 
    <select class="goog-te-combo"> 
 
     <option value="">Seleccionar idioma</option> 
 
     <option value="zh-CN">chino (simplificado)</option> 
 
     <option value="fr">francés</option> 
 
     <option value="en">inglés</option> 
 
     <option value="it">italiano</option> 
 
     <option value="vi">vietnamita</option> 
 
    </select> 
 
    </div> 
 
    </div> 
 

 

 
<script type="text/javascript"> 
 
$(".goog-te-combo").select2(); 
 
</script>

Answer 2

あなたは、背景色を変更し、CSSスタイル後!importantを配置するホバー擬似クラスを使用することができます。

例スニペット：

.goog-te-combo option:hover { 
 
    background: pink !important; 
 
}

<div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
 
    <div id=":0.targetLanguage"> 
 
    <select class="goog-te-combo"> 
 
     <option value="">Seleccionar idioma</option> 
 
     <option value="zh-CN">chino (simplificado)</option> 
 
     <option value="fr">francés</option> 
 
     <option value="en">inglés</option> 
 
     <option value="it">italiano</option> 
 
     <option value="vi">vietnamita</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 3

すべてのブラウザ間で所望の効果を達成することは不可能です。

私はそれは、その目的のために<ul>と<li>要素の使用例については、このソリューションを見てみ:

https://codepen.io/wallaceerick/pen/ctsCz

、選択のカスタム実装を使用することをお勧めいたします。