Display accesskeys, mostly harmless

Added by myf@userstyles, Created: Apr 05, 2007, Updated: Jul 28, 2016
With the style applied


Reveals access keys while trying to preserve original elements dimensions.

More info
Variation of the http://freestyler.ws/style/1238/keyboard-shortcut-display-for-web-pages by JasonBarnabe@userstyles.

This version tries not to affect layout, so the letters ale displayed in simple bubble of fixed dimensions[2)] next to its elements [1)] and disappears while hovered/focused.
Test it here:

1) Tt is not possible to add CSS-generated content after any INPUT (of any type), TEXTAREA, and image-map AREA, because these are "replaced elements" per definition, but possible to workaround with userscript [4)]
2) Dimensions absolutely relies on used font. This versions expects "Courier new" (present on Windows platform). Other fallback fonts may cause few pixels difference. Then you must tweak last three lines of the first ruleset containing font-size and margin-left. Use the testing ground linked above.
3) Not using "*" selector for 'better performance'. Naming all four remaining accesskey-ready elements explicitly.
4) userscript and enhanced version of this userstyle that physically adds accesskey letters after inputs.
Supportive userscript: http://userscripts-mirror.org/scripts/show/8376
Enhanced userstyle: http://freestyler.ws/style/1725/display-accesskeys-enhanced

Known issues:
1) Wrapping links with accesskeys are forced not to wrap. It is necessary in order to be efficient in case of short single-line links in narrow fixed-width columns. Delete this rule (it is the last one in the source) if it destroys something.

2007-10-14 + opacity, screenshots (taken from last.fm)
2016-07-28 + made circular again, ie. unprefixed border-radius. Oh, memories.

Applies to:
http://, https://

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.