Черная рамка на кнопках IE7 на текстовой области / фокус ввода

Question

Я столкнулся со странной проблемой IE7 ..

У меня есть несколько стандартных кнопок в стиле CSS с фоновым рисунком и сплошной синей рамкой размером 1 пиксель. Они работают как положено, кроме как в IE7 ..

Если я щелкаю внутри элемента формы (textarea / input-field), он автоматически добавляет черную рамку на мои кнопки .. Иногда это также происходит в других случаях, когда элементы находятся в фокусе / активны ..

Вы можете увидеть простой пример здесь

Дело в том, что мне нужна рамка для кнопок для стилизации, поэтому нет ли способа отключить это поведение в IE7 без удаления исходной границы - ни с помощью CSS, ни с помощью jQuery?

Answer 1

Я писал об этой проблеме здесь: http://markmintoff.com/2012/01/remove-internet-explorer-black-border-around-button/

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

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

Answer 2

IE выделяет кнопку формы по умолчанию, кнопка, которая будет срабатывать, если вы нажмете клавишу ввода внутри одного из входов формы.Чтобы отключить выделение, у вас есть пара параметров:

1. Сделайте кнопку сохранения type="button" вместо type="submit" и обработайте отправку формы, обработав событие нажатия кнопки в JavaScript.Это был ответ на этот связанный вопрос (хотя ASP.NET обрабатывает часть javascript за кулисами).
2. Добавьте кнопку second type="submit" в качестве кнопкисначала введите форму, а затем скройте ее с помощью CSS.Обратите внимание, что display:none; не обрежет его, его нужно скрыть, поместив его за пределы экрана, например: position: absolute; top: 0; left: -9999px;.Это был ответ на этот связанный вопрос .

Answer 3

JQuery: $('input[type="submit"]').focus().blur();

Answer 4

JavaScript:

document.getElementById('save').focus();
document.getElementById('save').blur();