Focus highlight border cannot be removed in touch mode using Browser 7.1 (Known Issue)

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Tested with

Devices(s): N97 (21.0.045)
N97 Mini (11.0.045)

---

Compatibility

Platform(s): S60 5th Edition

---

Article

Created: User:Kbwiki (05 Mar 2010)

Last edited: hamishwillee (01 Aug 2012)

Overview

Focusable elements will be highlighted with a blue rectangle when tapped. Developers do not have control over the highlight rectangle's appearance.

Description

In touch interaction mode, button and anchor elements are highlighted with a blue border when tapped with a finger. In previous browser versions, developers have had control over the highlight rectangle's appearance.

For non-touch interaction mode, i.e. tabbed navigation, the highlight can be disabled by setting the CSS style:

a:hover, a:focus { outline: none; }

On touch devices using Browser 7.1, this rectangle will always appear and its appearance cannot be modified.

Solution

For touch devices, use clickable spans and divs instead of buttons and anchors. However, note that these cannot be focused on in tabbed navigation mode.