2011-12-22 3 views
4

Я столкнулся странные проблемы IE7 ..Черная рамка на кнопки IE7 на TEXTAREA/фокус ввода

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

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

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

enter image description here

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

ответ

8

Я писал о этой проблеме здесь: 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; 
    } 
+0

Хотя он удаляет черную рамку, к сожалению, это делает невозможно использовать фильтры на кнопке (например, градиенты) – skip405

+0

В этом случае вы можете легко добавить фоновое изображение с градиентом. Да, это обходной путь, но что не происходит, когда дело касается IE? –

+3

Только что я обнаружил сегодня: это * делает * исправление черной границы в IE7, но * не * IE10 (и, возможно, IE9) в режиме «IE7». Поскольку этот режим предназначен для тестирования, это не проблема, а что-то, о чем нужно знать. Я потратил много времени, пытаясь понять, почему это не сработало, только чтобы, наконец, попробовать установить IE7. Этот режим тестирования является приближением IE7, но, очевидно, не совсем то же самое. – chipcullen

3

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

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

Я работаю на большой сайт с большим количеством кнопок .. Не существует более простой способ переделывания все это только для IE7? Я думаю, что сценарий jQuery/плагин или некоторый CSS-взлом – donpedroper

+0

На данный момент я просто удалил границу только в IE7 .. Просто надеялся, что есть лучшее решение:/ – donpedroper

1

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

+0

Сначала я думал, что это сработает, но в 'IE 7' это не так. ['Вот что я пробовал'] (https://gist.github.com/b270aa95c04a665df128.git) – Shubh

0

JavaScript:

document.getElementById('save').focus(); 
document.getElementById('save').blur(); 
Смежные вопросы