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

Are you looking for:

button{
  outline:none;
}

or if your button is an input...

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

Answer 2

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 3

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 4

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 5

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 6

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.