선택 항목의 배경색을 변경하십시오.

Question

Image problem

해당 항목이 선택되어 있습니다. 그것은 google을 선택하기 때문에 구조체를 수정할 수 없습니다 (내부 div는 select입니다). 그러나, 나는 무엇을 알고 선택의 그것의 클래스 ('.goog-TE-콤보') :

내가 다른 색상에 대한 옵션을 마우스를 가져 가면 푸른 색을 변경하려면

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

.

Select2 또는 Chosen을 사용해 보았지만 제대로 작동하지 않습니다.

전체 코드를 (내가 그나마 아마 때문에 방법 수입 정확하게 그 라이브러리를 알고) :

<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

당신은 CSS와 그것을 달성 할 수있다.

.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

그것은 모든 브라우저에서 원하는 효과를 달성 할 수 없다.

은 당신이 선택의 사용자 정의 구현을 사용 예를 들어,이 솔루션 :

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

그것은 그 목적을 위해 <ul> 및 <li> 요소를 사용 살펴 보도록하는 것이 좋습니다.