button:focus - anderes, nicht verschachteltes Element formatieren

[Gunnar Bittersmann]

@@A. Kupferschmidt

Damit das funktionier brauchst du noch einen Skript:

Damit das funktioniert, muss das Script (der Script??) noch etwas mehr tun, wie ich euch in diesem Thread schon gelinkt hatte.

mydiv.style.display = (mydiv.style.display=='block'?'none':'block');

Anstatt in JavaScript direkt mit der CSS-Eigenschaft display rumzuhantieren bietet sich an, das HTML-Attribut hidden ^[1] zu setzen bzw. zurückzusetzen:

mydiv.hidden = !mydiv.hidden;

Der Container wird dann wie folgt aufgerufen:

<div id="st1" style="display: none;">

Der Container wird dann wie folgt aufgerufen:

<div id="st1" hidden>

---

.button {
 width: ; /* Breite des Buttons */
 height: 25px; /* Höhe des Buttons */
 border: 1px solid #aaa; /* Rahmen */
 border-radius: 5px; /* Abgerundete Ecken */
 background: #eee; /* Hintergundfarbe für ältere Browser */
 background-image: linear-gradient(#cdffbc, #6ec153); /* Farbverlauf */
 display: block; /* Darstellung als Block-Element */
 text-align: center; /* Horizontale Text-Ausrichtung */
 text-decoration: none; /* Links nicht unterstrichen */
 color: #333; /* Textfarbe */
}
.button:hover {
background-image: linear-gradient(#6ec153, #cdffbc); /* Farbe */
color: white;
}

Die Kommentare sind überflüssig, wenn sie lediglich eine Übersetzung des sich selbsterklärenden Codes ins Deutsche sind.

Nicht überflüssig ist ein Wert für width.

LLAP 🖖

---

1. Mit Absicht die W3C-Spec verlinkt. Die WTFWG-Spec erzählt Unsinn. Hixieismus. ↩︎