25 lines
639 B
HTML
25 lines
639 B
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fokus-Indikator</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
|
|
:focus, .is-focused {
|
|
outline: 2px solid blue;
|
|
outline-offset: 2px;
|
|
}
|
|
button:focus-visible, button.is-focused {
|
|
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
|
}
|
|
button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Tab-Taste drücken:</p>
|
|
<button class="is-focused">Erster Button</button>
|
|
<button>Zweiter Button</button>
|
|
<button>Dritter Button</button>
|
|
</body>
|
|
</html>
|