グーグル翻訳リストのカスタマイジング

- 必要な言語表示

すべての言語が表示されて言語を探すのが難しいもありますし、すべての言語が必要ないので必要な言語のみ選択する方法です。

言語選択に使うプロパティは「includedLanguages」を使用します。
プロパティでは言語コードでコンマ（,）で区別して表示した言語コード入れます。

"pageLanguage: 'ja'" の後ろにコンマで区別して "includedLanguages : 'ja,en,ko'"のように追加する。
プロパティに追加した日本語、英語、韓国語の３つの言語のみ選択する事が可能です。

function googleTranslateElementInit() {
	new google.translate.TranslateElement({pageLanguage: 'en' , includedLanguages : 'en,ja,es'}, 'google_translate_element');
}

- CSSでデザイン変更

リストのデザインがシンプルなのでCSSでデザインを変更します。

#google_translate_element > div > div {
	position: relative;
	min-width: 200px;
	height: 60px;
}
#google_translate_element > div > div > select::-ms-expand {
    display: none;
}

#google_translate_element > div > div:after {
    content: '<>';
    font: 17px "Consolas", monospace;
    color: #333;
    transform: rotate(90deg);
    right: 11px;
    top: 18px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    position: absolute;
    pointer-events: none;
}

#google_translate_element > div > div > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 320px;
    height: 50px;
    float: right;
    margin: 5px 0px;
    padding: 0px 24px;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    border: 1px solid #cccccc;
    -ms-word-break: normal;
    word-break: normal;
    border-radius: 10px;
}