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

I have done it.

Here you go: http://jsbin.com/oniva4. [tested on Opera 10.5/11]

The secret is using outline-offset:-2px; (effectively covering the dots) and the background's color for the outline. outline-offset is supported since version 9.5.

Answer 2

The introduction of the article Do not lose your focus

For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups.

In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.

And the list of test given by the article on outline management.

Update 2011-02-08

I can confirm that it is not possible for now. There is an open bug for it.

Answer 3

I say this with the clear proviso that you shouldn't remove the outline unless you replace it with something else that indicates focus state ...

If you apply a transform to the element, it kills the outline in opera; it doesn't even need to do a visible transform, merely applying the property is enough. So this will do the job:

#myButton:focus
{
    -o-transform:rotate(0);
}

But I can't promise that wouldn't be considered a rendering bug, and consequently something that may change in the future.

Answer 4

I believe the problem lies in where you specify the outline properties. Try this:

*:focus, *:active {
        outline: none; (or possibly outline: 0)
}

I researched this more and it looks like on input fields and buttons it will not work unless you edit the browser's config, like Firefox's about:config page. It seems to be done for accessibility reasons so that a keyboard can be used to fill out and send a form without using a mouse.

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

Are you looking for:

button{
  outline:none;
}

or if your button is an input...

input[type=button]{
  outline:none;
}

Answer 7

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 8

Further to my tip above -- with experience I've found that it doesn't always work, and isn't always appropriate anyway, since it can change the way the element is rendered in subtle and sometimes unpleasant ways.

So, if that doesn't work, another thing you can do which often does, is to specify the outline color as "rgba(0,0,0,0)"

Answer 9

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

Answer 10

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 11

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 12

better:

outline: solid 0;

for all web browsers