Граница Google CSE не будет скрыта в IE7, 8 и 9

Question

Я использую Google CSE и использую старую версию разметки.Это упрощенная версия разметки:

<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 -->

У меня есть собственный CSS, чтобы скрыть границы текстового поля ввода, и у меня все это сидит в div с фоновым изображением и тому подобным.В Firefox, Safari и Chrome все выглядит великолепно, но во всех версиях IE (7 - 9) синяя рамка от Google не исчезнет!Я испробовал все следующие идеи:

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 */
}

Прямо сейчас, единственное временное решение, которое я мог придумать, состояло в том, чтобы уменьшить окно так, чтобы - по крайней мере - синие границы Google вокруг текстового поля появится внутри div с фоновым изображением.Таким образом, существует два набора границ.

Примечание: Когда я удаляю файл JavaScript из Google, CSS-материал для границ работает в IE!

Может кто-нибудь предложить какую-нибудь информацию?

Answer 1

Я думаю, вам нужно изменить стиль в настройках Google, так как JavaScript перезаписывает тег стиля.

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

В противном случае вы можете использовать:

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

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