7

私はウェブサイトを持っており、このウェブサイトにグーグル翻訳を追加して、人々がウェブサイトをさまざまな言語で見ることができるようにしています

私が追加したコードは

<div id="google_translate_element"></div>
<div id="language"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
    pageLanguage: 'en', includedLanguages: 'bn,en,kn', 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>

背景色、テキストの色、テキストのサイズ、幅などのドロップダウンをカスタマイズしたいのですが、どうすればこれを行うことができますか

私を助けてください

ドロップダウンの不透明度を0にして、ドロップダウンを同じ場所に配置して、同じように動作するようにしましたが、機能しません....

4

2 に答える 2

15

これが古い投稿であることは承知していますが、私のように同じ問題を抱えていた/これから抱える他の人のために、ここで私の解決策を共有しています。

ドロップダウンは 内にあるiframeため、ページでその CSS を指定するだけでは役に立ちません。jQuery を使用して Google 翻訳者のドロップダウン メニューのスタイルを設定する方法は次のとおりです。

$('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': '#544F4B',
                'font-family': 'tahoma'
            });

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

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

        // 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'
        });
    });
});
于 2012-12-05T19:11:50.940 に答える