В Opera граница кнопки ввода исчезает, когда текстовое поле становится активным, как я могу предотвратить это? - PullRequest
Новая
       1

В Opera граница кнопки ввода исчезает, когда текстовое поле становится активным, как я могу предотвратить это?

3 голосов
/ 02 июня 2011

Я пытаюсь стилизовать кнопку отправки в виджете поиска wordpress, но Opera доставляет мне неприятности.

Я установил сплошную границу 1px на кнопку, и она отображается нормально до тех пор, пока текствход активирован, затем граница на кнопке, кажется, исчезает (или становится черной, я не могу сказать).

Это не происходит в Firefox, где кнопка выглядит так же, даже если текстовое поле активировано.

Это CSS, который у меня сейчас есть: 

li.widget_search #searchform #searchsubmit
{
    height: 24px !important;
    border-color: #ff9900;
    border-width:1px;
    border-style: solid;
    background-color: #201300;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #FFB100;
    padding: 0px 3px 0px 3px;
    overflow: hidden;

}

li.widget_search #searchform #searchsubmit:active
{
    border: 0px;
}

Ответы [ 3 ]

1 голос
/ 02 июня 2011

Это проблема Opera.Она всегда добавляет черную рамку, если она указана в фокусе кнопки, независимо от настроек этой рамки (по крайней мере, цвета или стиля).Все остальные браузеры отображают здесь красивую синюю рамку, наследуя все настройки от обычного правила CSS для кнопки.

Вы можете предотвратить это на своей собственной кнопке, удалив рамку с кнопки: стиль фокуса.1004 * Попробуйте ... 

a.button:active { border:0px; }
0 голосов
/ 24 декабря 2012

Используйте элемент button вместо input, например 

<button type="submit">Submit</button>

, и вы не увидите черную рамку в Opera.

0 голосов
/ 15 ноября 2011

Как насчет этого: Я думаю, что совет мистера Дэвида Мердока лучший для Оперы ( здесь ). Я попробовал его подход в Opera, и мне удалось в основном удвоить теги ввода следующим образом: 

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

Таким образом, 1-й элемент скрыт, но он ПРОТИВ фокусировки дисплея, который Opera будет отдавать 2-му элементу ввода. ЛЮБЛЮ ЭТО!

...