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

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

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

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

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

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

Ответ 1

Хорошо это работает здесь:

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

Ответ 2

если вы не хотите добавлять обертку к кнопке ввода /, попробуйте сделать это. Поскольку это недопустимый CSS, тогда сделайте sre только для IE. У вас есть граница для других браузеров, но используйте фильтр: chroma для IE...

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

работал у меня.

Ответ 3

Я знаю, что я почти на 2 года опоздал на игру, но нашел другое решение (по крайней мере, для IE7).

Если вы добавите еще один input type="submit" к своей форме перед любой другой кнопкой отправки в форме, проблема исчезнет. Теперь вам просто нужно скрыть эту новую, поглощающую черную границу кнопку.

Это работает для меня (переполнение должно быть "авто" ):

<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />

Примечание. Я использую HTML-тип doctype (<!doctype html>).

Ответ 4

Я нашел ответ, который работает для меня на другом форуме. Он удаляет нежелательную черную границу в ie6 и ie7. Вероятно, что некоторые или многие из вас не позиционировали ваш вход = "отправить" в тегах формы. Не забывайте об этом. Это сработало для меня, попробовав все.

Если вы используете кнопку отправки, убедитесь, что она находится в форме, а не только в виде набора:

<form><fieldset><input type="submit"></fieldset></form>

Ответ 5

Мне удалось объединить предложение Дэвида Мердока с некоторым 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");
        }

Вы можете включить это на главную страницу или ее эквивалент, чтобы она была применена ко всем страницам вашего сайта.

Он работает, но он чувствует себя немного не так, как-то.

Ответ 6

Я основываюсь на примере @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]-->

Ответ 7

Правильно, ну вот уродливое решение для вас взвесить... Прикрепите кнопку в <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>

Ответ 8

Лучшее решение, которое я нашел, заключается в перемещении границы к оберточному элементу, например:

<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 не поддерживает его.

Любые лучшие решения приветствуются.

Ответ 9

Я думаю Фильтр: цветность (цвет = # 000000); как уже отмечалось, это лучшее, что можно применить в определенном классе. В противном случае вам придется пойти и применить дополнительный тег на каждой кнопке, которая у вас есть, если вы используете классы, конечно.

.buttonStyle { Фильтр: цветность (цвет = # 000000); ПРЕДПОСЫЛКА-ЦВЕТ: # E5813C твердый; BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; COLOR: # FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: жирный шрифт; ТЕКСТ-УКРАШЕНИЕ: нет; } Это сделало это для меня!

Ответ 10

У меня была эта проблема, и я решил ее с помощью div вокруг кнопки, отобразил ее как блок и позиционировал ее вручную. поля для кнопок в IE и FF были просто слишком непредсказуемыми, и им не удавалось быть счастливыми. Моя кнопка отправки должна была быть полностью выровнена против ввода, поэтому она просто не работала бы без позиционирования элементов в виде блоков.

Ответ 11

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

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

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

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

Ответ 15

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

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

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

Таким образом, первый элемент скрыт, но он ПОДНИМАЕТ экранный фокус, который Opera предоставит вместо второго входного элемента. ЛЮБИТЕ ЭТО!

Ответ 16

По крайней мере, в IE7 вы можете стилизовать границу althogh, которую вы не можете удалить (установите ее на none). Таким образом, установите цвет границы на тот же цвет, что и ваш фон.

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

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

Ответ 17

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

outline: none;

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

Ответ 18

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

<!--[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.