I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.

Example picture:

How can I remove it?

I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.

Example picture:

How can I remove it?

• javascript
• css
• mobile
• opera

6 Answers 6

I think Opera may be looking for something a little stricter on the outline element.

Try:

a:focus { outline:0px solid #fff; }

The 'solid' and 'colour' will be ignored.

Try this:

a, a:active, a:focus {outline:none}

Also if you are having trouble on a Flash object/embed, you can:

object, embed {outline: 0}

Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target

Uh-oh:

Spatial navigation: Spatial Navigation is an Opera feature whereby each element available for activation is put into a collection. When the user moves a joystick or clicks specific keys, the focus is moved to the next element in the collection. This element is typically highlighted with a blue or black border. Links, form controls, and elements with onclick handlers are added to the collection.

http://dev.opera./articles/view/characteristics-of-widgets-on-mobile-pho/

Use div's with onclick() handler, instead staight <a> or buttons: Example: In CSS:

#home-send{
background: url(gfx/button.png) no-repeat;}

On page:

<div id="home-send" onclick="next('NEXT ACTION');"></div>

On click on the DIV the action will take place ,but no outline borders effect.

I hope this help

To remove the Blue border use this on TOP of you CSS file

:focus { outline: 0 solid; }

or

:focus { outline: none; }

I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).

Try:

:focus{
    outline: 2px solid rgba(0,0,0,0.0);
}

If that doesn't work, you can go more specific like:

a, a:active, a:focus {
    outline: 2px solid rgba(0,0,0,0.0);
}

You need to actually set an outline first, then make it transparent.

https://dev.opera./tv/tweaking-spatial-navigation-for-tv-browsing/