CSS Kochbuch

7.17 Tastaturkürzel in Webformularen hervorheben

Problem

Die Tastaturkürzel für ein Webformular sollen visuell hervorgehoben werden.

Lösung

Verwenden Sie Nachkommen-Selektoren, um die Zeichen im label-Tag hervorzuheben, die den Tastaturkürzeln entsprechen.

Zuerst legen Sie hierfür eine CSS-Regel an, die besagt, dass der Text innerhalb von em-Tags, die sich ihrerseits in einem Formular befinden, unterstrichen dargestellt werden soll:

form em {
 text-decoration: underline;
 font-style: normal;
}

Um die Buchstaben für die Tastaturkürzel hervorzuheben, umgeben Sie diese im HTML-Text entsprechen der CSS-Regel mit em-Tags.

<form id="msgform" name="msgform" method="post" action="/process.php">
 <label for="fmtitle" accesskey="a"><em>A</em>nrede</label> <select ...