In Opera the border on input button disappears when the text field becomes active, how can i prevent that?

Question

I'm trying to style the submit button on the wordpress search widget, but Opera is giving me trouble.

I've set a 1px solid border on the button, and it appears fine until the text input is activated, then the border on the button seems to disappear (or becomes black, i can't tell).

This does not happen in firefox where the button appears the same even if the text field is activated.

This is the css i have now:

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

score 1 · Answer 1 · answered Jun 02 '11 at 11:00

1

This is an Opera issue. It always adds a black border if a border is specified on button focus, regardless of the settings of that border (color or style at least). All other browsers display a nice blue border here, inheriting all the settings from the normal button CSS rule.

You can prevent this on your own button by removing the border from the button:focus style.

Try...

a.button:active { border:0px; }

answered Jun 02 '11 at 11:00

Liam

9,725
39
111
209

Setting "border-style: none;" to the #mybutton:focus doesn't seem to have any effect. – Kanonskall Jun 02 '11 at 11:05
Have you any code we could see? Not ideal but maybe you could use javascript to change the style when the input field is active? – Liam Jun 02 '11 at 11:06
"border:0px;" on #mybutton:active doesn't seem to help either. – Kanonskall Jun 02 '11 at 11:09
@Liam, i've added the css i have at the moment. Thanks for your time. – Kanonskall Jun 02 '11 at 11:13
Try... #searchsubmit:active {border:1px solid #ff9900;} – Liam Jun 02 '11 at 11:33
Doesnt seem to work. Even when i set border width to 50px just to see if it has any effect nothing happens. – Kanonskall Jun 02 '11 at 11:36

Mori · Answer 2 · 2012-12-24T06:21:31.930

0

Use a button element instead of an input, e.g.

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

and you won't see the black border in Opera.

edited Dec 24 '12 at 06:21

answered Dec 24 '12 at 06:12

Mori

8,137
19
63
91

score 0 · Answer 3 · edited May 23 '17 at 11:55

How about this: I think Mr. David Murdoch's advice is the best for Opera ( here ). I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:

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

This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!

In Opera the border on input button disappears when the text field becomes active, how can i prevent that?

3 Answers3