Google CSE border won't hide in IE7, 8 and 9

Question

I am using Google CSE and I'm using an older version of the markup. This is a simplified version of the markup:

<div id="search">
    <form action="http://www.google.com/cse" id="cse-search-box">
        <input type="hidden" name="cx" value="myaccountvalue" />
        <input type="hidden" name="ie" value="UTF-8" />

        <input class="search-input" type="text" name="q" />
        <input class="search-btn" type="image" name="sa" 
            src="path/to/my/submit-button.jpg" 
            onclick="this.submit();" />
    </form><!-- #cse-search-box -->
    <script type="text/javascript" 
        src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
    </script>
</div><!-- #search -->

I have custom CSS to hide the borders of the input text box and I have it all sitting in a div with a background image and such. Everything looks great in Firefox, Safari and Chrome, but in all versions of IE (7 - 9) the blue border that comes from Google won't go away! I've tried all of the following ideas:

input.search-input {
    border: none;              /* doesn't work */
    border: 0;                 /* doesn't work either */
    border-color: transparent; /* doesn't work */
    background: none;          /* doesn't work */
}

Right now, the only interim solution I could come up with was to shrink the box so that - at least - the blue google borders around the text box will appear inside the div with the background image. So there are two sets of borders.

Note: When I remove the JavaScript file from Google, the border CSS stuff works in IE!

Can anyone offer any insight?

Answer 1

I think you need to change the style in Google's settings, as the javascript overwrites the style tag.

http://code.google.com/apis/customsearch/docs/ui.html#overview_howto

otherwise you can use:

input.search-input {       
    border: 0 !important;
}

http://jsfiddle.net/Britta/sNrY9/