Black box around input button in OPERA?

Question

List item

Why is a black box appear around input button in opera. Here is the jsfiddle link. http://jsfiddle.net/PKRRj/

try clicking on the button

TRY in OPERA. No problem with the other browsers.

Additional Information regarding Browser.

About Opera
Version information Version 11.50

Build 1074

Platform Win32

System Windows 7

What i did

Clicked once on the button enter image description here

Opera, windows 7, identifiys itself as: "Version 11.50 Build 1074", no black rim. What's that thing in the corner? a pluging? or some other plugin around that puts a black ring on a focussed object? — Nanne, Aug 21 '11 at 20:14
possible duplicate of [In Opera the border on input button disappears when the text field becomes active, how can i prevent that?](http://stackoverflow.com/questions/6213609/in-opera-the-border-on-input-button-disappears-when-the-text-field-becomes-active) — mercator, Aug 21 '11 at 20:40

score 1 · Answer 1 · answered Aug 21 '11 at 20:01

1

Works fine for me in Opera 11.50b1074 on Windows 7.

answered Aug 21 '11 at 20:01

Matt Ball

354,903
100
647
710

score 1 · Accepted Answer · answered Aug 21 '11 at 20:12

1

It seems it's a bug in Opera. I could not find a way to completely remove it but here is a sort of work around.

Remove any border from the input element on focus:

.buttonStyle1 {
    ...
}
.buttonStyle1:focus {
    border:none;
}

I know it's not the way way to fix this especially if you need a border. Hopefully Opera will fix this.

answered Aug 21 '11 at 20:12

miki725

27,207
17
105
121

yeah.. so the bug is with border in opera. – shahalpk Aug 21 '11 at 20:29

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

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!

score 0 · Answer 4 · answered Dec 24 '12 at 06:20

0

Use a button element instead of an input:
http://jsfiddle.net/PKRRj/65/

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

answered Dec 24 '12 at 06:20

Mori

8,137
19
63
91

score 0 · Answer 5 · answered Aug 21 '11 at 19:56

0

I have tried that in the current Opera and Firefox under Linux, no black box at all. Maybe you should provide more informations like Opera Version and Operating System?

answered Aug 21 '11 at 19:56

Thomas Berger

1,860
13
26

1

or a link to the page, it may be other code than the small sample you posted. – Aug 21 '11 at 20:00
@dagon. if it was, then i wudn't see it in the jsfiddle sample. – shahalpk Aug 21 '11 at 20:05
your the only one that sees it at all. – Aug 21 '11 at 20:07
sure its not just a jsfiddle. issue? – Aug 21 '11 at 20:08
@dagon. try clicking on it once. – shahalpk Aug 21 '11 at 20:08

Black box around input button in OPERA?

5 Answers5