前端使用Google Translate插件，并优化原生select样式

google官方的给的例子，其实际效果如下：demo

经过修改后的效果如下：像不像iphone换了个【深色系统】

同样的，选中展示的效果也变化了：

实现代码

1、引入Google Translate地址

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

 <div id="google_translate_element" class="footer-translate-element"> </div>

2、修改css样式

去除select原本的下拉icon（三角形），引入自己漂亮的icon

.goog-te-combo {
  width: 300px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: #FFFFFF;
  padding: 0 0 0 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 45px;
  appearance: none;
  cursor: pointer;
  background: #1F2635 url(/Content/Images/select-icon.png) no-repeat scroll 100% 45%;
}

修改select默认滚动条样式

.goog-te-combo::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  height: 6px; /* 设置滚动条高度 */
}

.goog-te-combo::-webkit-scrollbar-track {
  background-color:  #263044; /* 设置滚动条轨道颜色 */
}

.goog-te-combo::-webkit-scrollbar-thumb {
  background-color: #6C757D;; /* 设置滚动条滑块颜色 */
  border-radius: 50px; /* 设置滚动条滑块圆角 */
}

.goog-te-combo::-webkit-scrollbar-thumb:hover {
  background-color: #6C757D; /* 设置滚动条滑块鼠标悬停颜色 */
}

before VS after