Любой способ удалить IE черной рамкой вокруг кнопки отправки в активных формах?

Question

Я реализую дизайн, который использует пользовательские кнопки отправки в стиле. Это просто светло-серые кнопки с немного более темной внешней границей:

input.button {
    background: #eee;
    border: 1px solid #ccc;
}

Это выглядит как раз в Firefox, Safari и Opera. Проблема в Internet Explorer, 6 и 7.

Поскольку форма является первой на странице, она считается основной и, следовательно, активной с самого начала. Первая кнопка отправки в активной форме получает в IE сплошную черную рамку, чтобы пометить ее как основное действие.

Если я отключу границы, то черная лишняя граница в IE тоже исчезнет. Я ищу способ сохранить свои обычные границы, но удалить контур.

Answer 1

Это будет работать:

input[type=button]
{
       filter:chroma(color=#000000);
}

Это работает даже с тегом button, и в итоге вы можете безопасно использовать свойство background-image css.

Answer 2

Для меня приведенный ниже код действительно работает.

<!--[if IE]>
    <style type="text/css">
    input[type=submit],input[type=reset],input[type=button]
        {
            filter:chroma(color=#000000);
            color:#010101;
        }
    </style>
<![endif]-->

Получил его от @Mark's answer и загрузил только для IE.

Answer 3

Правильный ответ на этот вопрос:

outline: none;

... насколько мне известно, работает для IE и Chrome.

Answer 4

По крайней мере, в IE7 вы можете стилизовать границу, хотя вы не можете ее удалить (не устанавливайте ее). Поэтому установите цвет границы на тот же цвет, который должен делать ваш фон.

.submitbutton { 
background-color: #fff;
border: #fff dotted 1px; 
}

если ваш фон белый.

Answer 5

добавить * рамка: нет это удаляет границу для IE6 и IE7, но сохраняет ее для других браузеров

Answer 6

Я не могу комментировать (пока), поэтому я должен добавить свой комментарий таким образом. Я считаю, что совет мистера Дэвида Мердока лучший для Оперы ( здесь ). О, Боже, какая у него прекрасная девушка.

Я попробовал его подход в Opera, и мне удалось в основном удвоить входные теги следующим образом:

<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />

Таким образом, 1-й элемент скрыт, но он ПРОТИВ фокусировки дисплея, который Opera будет отдавать 2-му элементу ввода. ЛЮБЛЮ ЕГО!

Answer 7

Используя технику раздвижных дверей, используйте два spans внутри button. И исключите любое форматирование button в переопределении IE.

<button><span class="open">Search<span class="close"></span></span></button>

Answer 8

Хакерским решением может быть использование разметки следующим образом:

<button><span>Go</span></button>

и примените стили границ к элементу span.