How to remove button outline in Opera on focus

Question

Does anyone know how to remove the dotted pattern on buttons in Opera?

Answer 1

I have done it.

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

The secret uses outline-offset:-2px; (effective coverage of dots) and background color for the outline. outline-offset supported since version 9.5.

Answer 2

Introduction to the article Do not lose focus

For many web designers, accessibility conjures up images of blind users using firmware, and also makes it difficult to create sites for this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of users of screen firmware. And although its truth is that creating a complex site can be a difficult prospect, there are also many small things that take nothing more than a little reasonable planning, it is very easy to test (without having to buy expensive assistive technologies), and it can make a difference specific user groups.

In this short article, it's good to focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.

And a list of tests given in the article in contour control .

Update 2011-02-08

I can confirm that this is not possible now. There is an open error for this.

Answer 3

I say this with a clear caveat that you should not delete the outline unless you replace it with something else, which indicates the focus state ...

If you apply a transformation to an element, it will destroy the outline in the opera; he doesn’t even need to do a visible transformation, just apply the property. So this will do the job:

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

But I can not promise that this will not be considered a rendering error and, therefore, something that may change in the future.

Answer 4

I believe the problem is where you specify the properties of the path. Try the following:

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

I explored this more, and it looks like it won't work in the input fields and buttons unless you edit your browser configuration, like Firefox about: config page. This seems to be done for accessibility reasons, so the keyboard can be used to fill out and submit the form without using a mouse.

Answer 5

I used this trick above for my text area and it works great! Using the text area with the identifier "itens", here it is!

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

So you can play with this:

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

Answer 6

You are looking for:

 button{ outline:none; } 

or if your button is an input ...

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

Answer 7

Just read this post on the opera website

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

It seems to have no fix

Answer 8

In addition to my test above - with experience, I found that it does not always work and is not always appropriate, as it can change the way the element is rendered in a subtle and sometimes unpleasant way.

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

Answer 9

if you entered css-reset in the stylesheet, you should solve the problem.

Answer 10

Delete path 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

These are fewer answers and more explanations as to what is apparently happening:

---

Story

My reason for deleting the opera plan was to add my own outline. To add a schema, I used:

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

This works great in any other browser ... except Opera. Opera instead gives you this weird interference model that looks like a dotted-dashed :

now, if you delete the path, you still have the standard path that Opera provides, a simple simple dotted line at 1px:

Since I have no way to add a style for every browser other than Opera, instead I decided to remove Opera before adding my own. Using the brothercake solution, -o-transform:rotate(0); to do this and then applying my own outline:

Voila!

---

Explanation?

From what I can tell, Opera adds its own extra outline on top of any outline defined by CSS.

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

The color is the opposite of the background,
Width 1px ,
dotted style,
and offset 2px less than the border.

Sorry, no style image, loading does not work correctly

Interestingly, the dotted style for Opera outline does not coincide with the CSS outline, the dotted line, otherwise there would be no interference picture with both:

---

Output:

As I said above, I am using the brothercake solution, which should invalidate the operation boundary with:

 -o-transform:rotate(0); 

As he mentioned in his later commentary, this fix has some problems as it is a display error:

I noticed that when you return the window or tab to focus on the page containing the button, if the button previously had focus, the Opera outline will appear again until the button loses focus or freezes.

Answer 12

it's better:

 outline: solid 0; 

for all web browsers