Question

我有选择。这是翻译谷歌的选择，所以我无法修改结构（div内部是选择）。但是，我知道它的选择类是什么（＆＃39; .goog-te-combo＆＃39;）：

<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实现这一目标。

＆＃13;

$path = realpath(dirname(__FILE__) . '/../build/css/styles.css');
$css_contents = file_get_contents($path, true);

$matches;
preg_match_all('/\.u-fill-.*\n.*(#[0-9a-fA-F]+)/', $css_contents, $matches);

foreach($matches as $match) {
    echo '<div>' . $match . '</div>';
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用悬停伪类来更改背景颜色，并在css样式后放置!important。

示例代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

无法在所有浏览器中实现预期效果。

我建议你使用select的自定义实现，例如看一下这个解决方案#define DIGITAL_API

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

它为此目的使用:和<ul>元素。

更改选择的背景颜色悬停

3 个答案: