How to remove button outline in Opera on focus

Question

Does anybody know how to remove the dotted outline on buttons in Opera?

Answer 1

This is less of an answer, and more of an explanation as to what seems to be going on:

---

The story

My reason for removing opera's outline was to add an outline of my own. To add an outline I used:

:focus{
    outline:1px dotted #999;
    outline-offset:-3px;
}

This works perfectly fine in every other browser... except Opera. Opera instead gives you this weird interference pattern, which looks like a dotted-dashed outline:

now if you remove your outline, you still have the standard outline that Opera provides, a nice simple 1px spaced dotted line:

Since I have no way of adding a style to every browser except Opera, I instead decided on removing Opera's outline before adding my own. Using brothercake's solution, -o-transform:rotate(0); to do this and then applying my own outline:

Voila!

---

An Explanation?

From what I can tell, Opera adds it's own secondary outline on top of any outline defined by CSS.

This secondary outline seems to have an independent color, width, style, and offset.

Color is the opposite of the background,
Width is 1px,
Style is dotted,
and the offset is 2px smaller than the border.

sorry there is no style image, the upload didn't work correctly

one interesting thing is that the dotted style of the Opera outline is not the same as the CSS outline's dotted, otherwise there would be no interference pattern with both:

---

Conclusion:

As I stated above, I am using brothercake's solution which is to nullify the opera border with:

-o-transform:rotate(0);

As he mentioned in his later comment this 'fix' does have some issues as it is a rendering bug:

I have noticed that when returning window or tab focus to the page containing the button, if the button previously had focus, the Opera outline will reappears until the button loses focus or is hovered over.

Answer 2

Remove outline for anchor tag

a {outline : none;}

Remove outline from image link

a img {outline : none;}

Remove border from image link

img {border : 0;}

Answer 3

Just read this forum post on the opera website

http://my-beta.opera.com/community/forums/topic.dml?id=712402

There seems to be no fix for it

Answer 4

better:

outline: solid 0;

for all web browsers

Answer 5

I used that trick above for my text area and worked fine! Using a Text Area with an id "itens", here it goes!

#itens:focus, #itens:active{
    outline: 1px solid white;
    outline-offset: -2px;
}

So, you can play with that:

#itens:focus, #itens:active{
    outline: 1px solid lime;
    outline-offset: -2px;
}

Answer 6

if you attached css-reset in your stylesheet should solve the issue.