How to remove button outline in Opera on focus

Question

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

Bugleweed

I'm not getting a dotted outline in Opera for unstyled buttons <input type='submit> tags, etc. Could you elaborate on where you're seeing these dotted lines? – Butene

Do you mean the outline that appears when the buttons is focused (for example by tabbing to it)? – Enfold

Yeah, when the button is focused (by tabbing). – Bugleweed

May be Opera has some proprietary pseudo-class like -moz-focus-inner in Firefox? – Bugleweed

To clarify do you have an <input type="button" an <input type="submit" or a <button type="submit" or something else? and what styles do you currently have applied to it (if any)? – Grim

+1 - Whomever figures it out totally deserves the 300 points. – Detection

Do you want to replace the dotted outline by something else? Accessibility tools and keyboard navigation will need it. – Advisement

I don't believe it can be done for acceibility reasons. Try using an image as a button if you want. – Stepparent

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.

Walkling

@alex such a reward deserves a bonus jsbin.com/odipu5 (for the guy on the Opera forum) – Walkling

I can not apply this to button with gradient background. But next code works: button:focus { -o-transform:rotate(0); } – Interchangeable

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.

Advisement

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.

Penitential

This is the real answer; since it only removes opera's outline, you can still add your own custom outline. Genius! thank you very much. – Deventer

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.

Wellknown

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;
}

Aventurine

Answer 6

Are you looking for:

button{
  outline:none;
}

or if your button is an input...

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

Grim

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

Extine

This page requires a login to view. Could you summarize? – Deventer

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)"

Penitential

FYI, you can edit your answer to include more info instead of posting another answer. – Skricki

Sadly, rgba(0,0,0,0) doesn't work if you want to add your own custom outline. Opera actually creates two outlines, which share color, offset, and (presumably) width. Your previous answer removes the opera-custom-outline-thing and leaves you with only the 'real' outline as defined by CSS – Deventer

Answer 9

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

Contiguous

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;}

Gassy

This doesn't work on buttons. Since opera makes two outlines on buttons, though they share the same outline-offset, you can only edit one of them. – Deventer

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.

Deventer

Answer 12

better:

outline: solid 0;

for all web browsers

Chappelka