Safari Opacity Link Border Highlight Bug

This is a simple test in Safari to illustrate a bug where focusable elements inside a container with an opacity attribute set lose the decorative border highlight when the user puts focus on them with the tab key. Note that by default, Safari will not make links a target of the tab key. This test assumes the user has changed this setting, or is using option-tab instead.

A workaround for this bug is to set CSS rules on descendents of the wrapping block that sets opacity so that anchors within that block receive some other treatment on focus (as shown in this example with the forceFocusBorder class). CSS source:

.forceFocusBorder > a:focus {
 border: 1px solid blue;
 color: green;
}

This is simply an example, the :before pseudo-classes are used as illustrative means to show where the block with opacity and forced field borders on focus start and end.

Form Elements Demo

A sample field with no opacity

A sample field with a wrapping block that has opacity - will have no border on focus

A sample field with a wrapping block that has opacity, and a forced thin border using the :focus pseudo-class (Note the well-known Safari bug that doesn't actually allow border manipulation of INPUT elements)

Anchor Demo

A link with no opacity - this should display a border: I have a border on focus

A link with a wrapping block where opacity is 0.9 - when tabbed, this link will not show a highlight border indicating it has focus -- however, if the user hits enter, the link will be activated.

A sample anchor with a wrapping block that has opacity - will have no border on focus I have no border on focus

A sample anchorwith a wrapping block that has opacity, and a forced thin border using the :focus pseudo-class. I have a fake border on focus