cssgoogle-translate

Change border size in Google Translate widget

I added Google translator widget to my site.

<html lang="en-US">
<body>
  <div id="google_translate_element"></div>
<script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                {pageLanguage: 'ru'},
                'google_translate_element'
            );
        }
    </script>

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

When I select element, borders appear. I need to change their size. The following doesn't work: .goog-te-combo option:focus {outline-width: 0px !important; }

widget

Solution

  • You can try like this to change border style of google translator. I provide the CSS. I already tested it and it worked very well. Hope it helps you.

    .goog-te-combo {
    border: 1px solid #ccc !important;
    outline: none !important;
    padding: 5px !important;
    font-size: 14px !important;
}

.goog-te-combo:focus {
    outline: none !important;
}