Как удалить черную рамку IE вокруг кнопки отправки в активных формах?
Я реализую дизайн, в котором используются пользовательские кнопки отправки. Это просто светло-серые кнопки с немного более темной внешней границей:
input.button {
background: #eee;
border: 1px solid #ccc;
}
Это выглядит правильно в Firefox, Safari и Opera. Проблема в Internet Explorer 6 и 7.
Поскольку форма является первой на странице, она считается основной формой и, следовательно, активна с самого начала. Первая кнопка отправки в активной форме получает в IE сплошную черную рамку, чтобы пометить ее как основное действие.
Если я отключу границы, черная дополнительная рамка в IE тоже исчезнет. Я ищу способ сохранить мои нормальные границы, но удалить контур.
Ответы 18
Хорошо, вот уродливое исправление, которое вам нужно взвесить ... Вставьте кнопку в <span>, убейте границу на кнопке и вместо этого передайте границу диапазону.
IE немного сомневается в отношении полей элементов формы, поэтому это может работать не точно. Возможно, в этом отношении может помочь предоставление промежутку такого же фона, что и у кнопки.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
и
<span class = "button"><input type = "button" name = "..." value = "Button"/></span>
Может, дать кнопке маржу 1px? Это означало бы, что у пользователя будет меньше места для щелчка .. но не много ..
Я попробовал отступ в 1 пиксель, но он не «сдвигал» диапазон вверх или вниз - только влево и вправо.
Хакерским решением может быть использование такой разметки:
<button><span>Go</span></button>
и примените стили границы к элементу span.
Тег кнопки был бы хорошим решением, но, к сожалению, IE и FF обрабатывают их по-разному.
Лучшее решение, которое я нашел, - это переместить границу в элемент оболочки, например:
<div class='submit_button'><input type = "submit" class = "button"></div>
С помощью этого CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
Основная проблема с этим решением заключается в том, что кнопка теперь является блочным элементом и должна иметь фиксированную ширину. Мы могли бы использовать встроенный блок, за исключением того, что Firefox2 его не поддерживает.
Приветствуются любые лучшие решения.
Вот это работает:
<html>
<head>
<style type = "text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class = "button"><input type = "button" name = "..." value = "Button"/></span>
</body>
</html>
Это действительно работает, поэтому мне наверняка мешают другие правила CSS. Спасибо!
Хитрость заключалась в том, чтобы добавить background: none, чтобы границы просвечивали.
Я не уверен, почему, но если я добавлю документ HTML5 (<! Doctype html>), верхняя и нижняя границы не появятся ...
Если вы используете тип документа HTML5, который я обнаружил, вы можете получить верхнюю и нижнюю границы, добавив поля 1px сверху и снизу (т.е. измените margin: 0 на margin: 1px 0 1px 0;)
если вы не хотите добавлять оболочку к кнопке ввода / ввода, попробуйте сделать это. Поскольку это недопустимый CSS, сделайте его только для IE. Установите границу, как для других браузеров, но используйте фильтр: цветность для IE ...
<!--[if IE]>
<style type = "text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
работал у меня.
Да, это работает лучше, когда вы не можете заключить кнопку в оболочку.
<! - [if IE]> действительно не нужен - фильтр зависит от IE
Странно, если я сделаю input[type = "submit"] для вашего хака, он не будет работать в IE8. Но я знаю, что IE8 поддерживает выбор атрибутов, потому что он применяет к кнопке мой фон и другие стили.
Для @druciferre IE8 потребуется вместо этого использовать -ms-filter.
похоже, что это не влияет на кнопки в IE8 при работе в режиме совместимости. (Инструменты разработчика говорят, что режим браузера соответствует стандарту IE8, а режим документа - стандартам IE7).
Я думаю фильтр: цветность (цвет = # 000000); Как было сказано ранее, это лучшее, что вы можете подать в определенном классе. В противном случае вам придется применить дополнительный тег к каждой имеющейся у вас кнопке, если, конечно, вы используете классы.
.buttonStyle { фильтр: цветность (цвет = # 000000); ЦВЕТ ФОНА: # E5813C твердый; ГРАНИЦА-НИЖНИЙ: #cccccc 1px solid; ЛЕВАЯ ГРАНИЦА: #cccccc 1px solid; ПРАВАЯ ГРАНИЦА: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; ЦВЕТ: # FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, без засечек; РАЗМЕР ШРИФТА: 10 пикселей; FONT-WEIGHT: жирный; ТЕКСТ-ОТДЕЛКА: нет; } Это сделало это для меня!
добавить * граница: нет это удаляет границу для IE6 и IE7, но сохраняет ее для других браузеров
В технике раздвижных дверей используйте два spans внутри button. И исключите любое форматирование на button в вашем IE переопределении.
<button><span class = "open">Search<span class = "close"></span></span></button>
Я нашел ответ, который подходит мне на другом форуме. Удаляет нежелательную черную рамку в ie6 и ie7. Вероятно, что некоторые / многие из вас не разместили свой input = "submit" в тегах формы. Не забывайте об этом. Это сработало для меня после попытки все else.
Если вы используете кнопку отправки, убедитесь, что она находится в форме, а не только в наборе полей:
<form><fieldset><input type = "submit"></fieldset></form>
Я знаю, что опаздываю на игру почти на 2 года, но я нашел другое решение (по крайней мере, для IE7).
Если вы добавите еще один input type = "submit" в свою форму до любой другой кнопки отправки в форме, проблема исчезнет. Теперь вам просто нужно скрыть эту новую кнопку, поглощающую черную рамку.
У меня это работает (переполнение должно быть "автоматическим"):
<input type = "submit" value = "" style = "height:0;overflow:auto;position:absolute;left:-9999px;" />
Примечание. Я использую документ HTML5 (<!doctype html>).
У меня была эта проблема, и я решил ее с помощью div вокруг кнопки, отобразил его как блок и разместил вручную. поля для кнопок в IE и FF были слишком непредсказуемыми, и они оба не могли быть счастливы. Моя кнопка отправки должна быть идеально выровнена по отношению к вводу, поэтому она просто не будет работать, если элементы не будут позиционироваться как блоки.
Мне удалось объединить предложение Дэвида Мердока с некоторым JQuery, так что исправление будет автоматически применяться для всех элементов input: submit на странице:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type = "submit" value = "" style = "height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
Вы можете включить это в главную страницу или эквивалент, чтобы он применялся ко всем страницам вашего сайта.
Это работает, но почему-то кажется немного неправильным.
Я не могу комментировать (пока), поэтому я должен добавить свой комментарий таким образом. Я считаю, что совет мистера Дэвида Мердока лучше всего подходит для Opera (здесь). Боже, какая у него милая девушка, кстати.
Я пробовал его подход в Opera, и мне удалось удвоить входные теги следующим образом:
<input type = "submit" value = "Go" style = "display:none;" id = "WorkaroundForOperaInputFocusBorderBug" />
<input type = "submit" value = "Go" />
Таким образом, первый элемент скрыт, но он ЗАХВАТЫВАЕТ фокус дисплея, который Opera вместо этого передает второму элементу ввода. ЛЮБИТЬ ЭТО!
Я основываюсь на примере @ nickmorss использования фильтров, который на самом деле не сработал для моей ситуации ... Использование светового фильтра вместо этого сработало для меня намного лучше.
<!--[if IE]>
<style type = "text/css">
input[type = "submit"], input[type = "button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
По какой-то причине, используя filter: chroma(), как предложил nickmorr, если бы я использовал выбор атрибутов CSS, он переставал работать.
Использование вашей границы и свойств фильтра исправило это для меня. Блестяще!
По крайней мере, в IE7 вы можете стилизовать границу, хотя вы не можете ее удалить (установите значение none). Поэтому установите цвет границы того же цвета, что и фон.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
если ваш фон белый.
Это будет работать:
input[type=button]
{
filter:chroma(color=#000000);
}
Это работает даже с тегом button, и в конечном итоге вы можете безопасно использовать свойство background-image css.
Правильный ответ на этот вопрос:
outline: none;
... насколько мне известно, работает для IE и Chrome.
Удивлен, что это не наверху. На вопрос об удалении контура, почему так много ответов с использованием границ и фильтров цветности?
Ага, схема не поддерживается в IE 6-7: caniuse.com/#feat=outline
Для меня приведенный ниже код действительно работал.
<!--[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отвечать и загрузил только для IE.
Заключение кнопки в диапазон, чтобы она оставалась встроенной, отлично работает в IE, но в Firefox отсутствуют верхняя и нижняя границы (скрытые за кнопкой).