Google translate remove arrow in IE

Im looking to remove the arrow from the google translate button, no matter what i do, i can't remove it from IE7 or IE8 and its making me go crazy.

Image of the arrow below:

I've been able to style the rest of the translate but this arrow isn't going anywhere. code im using for Chrome and FF is:

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:last-child

Im running modernizr and all the other things to add support for last child. All the HTML is valid so no querks mode is being activated. I can't even target it with jquery. Its so weird.

Any help would be awesome.

sorry should have added this in, this is what google wants you to put into the page:

    <div id="google_translate_element"></div>
<script type="text/javascript">
                                                    function googleTranslateElementInit() {
                                                      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,es,fr,pl,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
                                                    }
                                                    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

and then this is what it spits out:

<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
<div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
<img src="http://www.google.com/images/cleardot.gif" class="goog-te-gadget-icon" style="background-image: url(http://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position: -65px 0px;">
<span style="vertical-align: middle;">
    <a class="goog-te-menu-value" href="javascript:void(0)">
    <span>Select Language</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="border-left-width: 1px; border-left-style: solid; border-left-color: rgb(187, 187, 187);">&#8203;</span>
    <img src="http://www.google.com/images/cleardot.gif" width="1" height="1">
    <span style="color: rgb(155, 155, 155);">▼</span>
    </a>
</span>
</div>
</div>
</div>

and its the last span im trying to target:

<span style="color: rgb(155, 155, 155);">▼</span>

Assuming the code being generated will never change, you could do it like this:

#google_translate_element span[style="color: rgb(155, 155, 155);"] {
    display:none;
}

That does seem quite a big hack though -- if you're loading this code direct from Google, there's no predicting that they might change their code in some subtle way and break your selector.

Using #google_translate_element a>span:last-child as the selector might be a more "correct" way to do it, but even that is subject to Google deciding to change the layout of their widget. Pretty much any selector you try to use to get to this element is going to have the same problem on that score.

Another angle to approach might be to use javascript to find and replace the down-arrow character from the string. Maybe something like this:

$("#google_translate_element a span").each(function() {
    $(this).html($(this).html().replace(/▼/,""));
});

Using each() here so that I can avoid having to be too specific with the selector, to avoi the issues described above.

And I know that looks like a long-winded way of doing it, but I'm trying to avoid breaking any event handlers. Otherwise I could just have done:

document.body.innerHTML = document.body.innerHTML.replace(/▼/,"");

But that would break stuff if you were using event handlers because it would rebuild the whole DOM, so use the each() method instead to do the replacement globally like that.