A Pen by Miguel Angel Perez.

demo.md

Styling & The Google Translate Widget

Questions? Hit me up: @Tayokoart

index.html

<!-- Google Translate -->
<div class="wl-translate-widget" id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

script.js

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

style.css

/* ===================================================
  Google Translate Widget
=================================================== */

.wl-translate-widget {
  padding: 0.5em;
  background: #474948;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1em;
}

.wl-translate-widget .goog-te-gadget-simple {
  padding: 0.5em;
  border-radius: 2px;
  border: none;
  background-color: #474948;
}

.wl-translate-widget .goog-te-gadget-icon {
  display: none;
}

.wl-translate-widget .goog-te-gadget-simple .goog-te-menu-value {
  color: #fff;
  font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
}

.wl-translate-widget .goog-te-gadget-simple .goog-te-menu-value:hover {
  color: #1abc9c;
}

.wl-translate-widget .goog-te-menu-value span {
  display: none;
}

.wl-translate-widget .goog-te-menu-value span:first-child {
  display: inline;
}

.wl-translate-widget .goog-te-menu-value span:after {
  content: '';
  display: inline-block;
  border: transparent 4px solid;
  border-top-color: #fff;
  margin-bottom: -2px;
  margin-left: 1em;
}

.wl-translate-widget .goog-te-menu-value:hover span:after {
  border-top-color: #1abc9c;
}