How to customize the dropdown menu of Google translate plugin in css?

Asked Jun 16 '15 at 06:41

Active Jun 16 '15 at 07:24

Viewed 1,649 times

I can't figure out that how I can change the background of the dropdrown menu of the google translate plugin

HTML

<script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,tl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
        }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

CSS

.goog-te-menu2 { 
    background-color: #000000 !important; 
    text-decoration: none; 
    border: 1px solid #f00 !important; 
    overflow: hidden; 
    padding: 4px;
}

and nothing's happen at all anyone can help me how to style this dropdown menu

edited Jun 16 '15 at 07:24

Shanaka

asked Jun 16 '15 at 06:41

jonathan david sarmiento

Do you have a link perhaps? – odedta Jun 16 '15 at 06:43
it's just on the localhost – jonathan david sarmiento Jun 16 '15 at 06:45
Can you make a fiddle? – Collin Jun 16 '15 at 06:46
https://jsfiddle.net/c79bj68b/ here's the fiddle – jonathan david sarmiento Jun 16 '15 at 06:51
3

The menu that is being loaded is loaded in an iframe, which you can't affect with CSS. [According to this answer](http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe), you can edit it with javascript, but [according to this answer](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe?rq=1), you need access to edit the page, or the page needs to allow direct access through Access-Control-Origin to use php's file_get_contents. It's messy. – Liftoff Jun 16 '15 at 06:54
ahh Got it! Thank you for the info – jonathan david sarmiento Jun 16 '15 at 06:55

How to customize the dropdown menu of Google translate plugin in css?

0 Answers0