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

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

39 голосов
/ 24 сентября 2008

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

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

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

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

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

Ответы [ 18 ]

31 голосов
/ 24 сентября 2008

Ну, это работает здесь: 

<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>
28 голосов
/ 24 апреля 2009

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

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

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

8 голосов
/ 29 июля 2010

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

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

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

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

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

2 голосов
/ 08 ноября 2011

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

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

Это работает, но как-то не так.

2 голосов
/ 29 декабря 2011

Я опираюсь на пример использования @ 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]-->
2 голосов
/ 28 апреля 2010

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

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

<form><fieldset><input type="submit"></fieldset></form>
1 голос
/ 20 июля 2009

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

.buttonStyle { Фильтр: цветность (цвет = # 000000); ЦВЕТ ФОНА: # E5813C solid; НИЖНЯЯ ГРАНИЦА: #cccccc 1px solid; ГРАНИЦА-ВЛЕВО: #cccccc 1px solid; ПРАВО ГРАНИЦЫ: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; COLOR: # FF9900; Шрифтовая семья: Вердана, Ариал, Хельветика, без засечек; Размер шрифта: 10 пикселей; Вес шрифта: жирный; ТЕКСТ-ДЕКОРАЦИЯ: нет; } Это сделало это для меня!

1 голос
/ 24 сентября 2008

Лучшее решение, которое я нашел, это переместить границу к элементу обтекания, например так: 

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

Основная проблема этого решения заключается в том, что кнопка теперь является блочным элементом и должна иметь фиксированную ширину. Мы могли бы использовать inline-block, за исключением того, что Firefox2 не поддерживает его.

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

1 голос
/ 24 сентября 2008

Правильно, вот вам некрасивое решение для взвешивания ... Вставьте кнопку в <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>
1 голос
/ 06 ноября 2010

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...