Black box around input button in OPERA?

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

---

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.

---

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

---

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!

---

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?

---

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

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