Need help styling Google Translate button

Question

I'm at a loss for styling the Google Translate button on my website via CSS. Specifically, I want to change the background/text colors from the default white/black to those that will match my page. So far I've tried several methods including those offered in another thread here, but to no avail. I'm using the simple dropdown button, and the HTML code is below. Thanks in advance for your help!

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ca,da,de,el,en,es,fr,it,ja,ko,nl,pl,pt,ru,sv,tl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

Just paste following right after your <scripts> tags

<style>
    div#google_translate_element div.goog-te-gadget-simple{background-color:green;}
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span{color:yellow}
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover{color:#fff}
</style>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Updated DEMO for hover.

Answer 2

Default styling by jQuery:

$('document').ready(function () {
    $('#google_translate_element').on("click", function () {

        // Change font family and color
        $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
            .css({
                'color': '#687074',
                'font-family': 'tahoma'
            });

        // Change hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
            $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white');
        }, function () {
            $(this).css('background-color', 'white').find('span.text').css('color', '#687074');
        });

        // Change Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B');

        // Change the iframe's box shadow
        $(".goog-te-menu-frame").css({
            '-moz-box-shadow': '0 3px 8px 2px #666666',
            '-webkit-box-shadow': '0 3px 8px 2px #666',
            'box-shadow': '0 3px 8px 2px #666'
        });
    });
});