Testen Sie Ihre Fähigkeiten: Erweitertes Styling

In unseren ersten erweiterten Styling-Aufgaben möchten wir, dass Sie ein Suchfeld in allen Browsern so konsistent wie möglich gestalten – eine kniffligere Aufgabe als bei Standard-Textfeldern, selbst in modernen Browsern.

Wir haben Ihnen bereits einen grundlegenden Reset zur Verfügung gestellt, auf dem Sie aufbauen können.

1. Geben Sie dem Suchfeld zunächst eine konsistente Breite, Höhe, Polsterung und Randfarbe in allen Browsern.
2. Sie werden feststellen, dass sich einige Browser bezüglich der Höhe des Formularelements nicht wie erwartet verhalten. Dies liegt daran, dass in einigen Fällen native OS-Styling verwendet wird. Wie kann man dieses native Styling entfernen?
3. Sobald Sie das native Styling entfernt haben, müssen Sie eine der Funktionen, die es bereitgestellt hat, wieder hinzufügen, um das ursprüngliche Aussehen und Gefühl zu erhalten. Wie machen Sie das?
4. Ein weiteres inkonsistentes Merkmal in verschiedenen Browsern (insbesondere bei Safari) ist die Position der standardmäßigen blauen Fokusumrandung. Wie kann man diese entfernen?
5. Es gibt ein großes Problem, wenn man die blaue Fokusumrandung einfach entfernt. Was ist es? Können Sie irgendeine Art von Styling hinzufügen, damit Benutzer erkennen können, wann das Suchfeld gehovt oder fokussiert wird?
6. Ein weiteres häufiges Merkmal eines Suchfelds ist ein Lupe-Symbol. Wir haben eines im selben Verzeichnis wie unsere HTML-Dateien zur Verfügung gestellt – siehe search-24px.png – sowie ein <div>-Element nach dem Sucheingabefeld, um es bei Bedarf anzuhängen. Können Sie einen sinnvollen Weg finden, es anzuhängen, und können Sie CSS verwenden, um es rechts neben dem Suchfeld zu platzieren und vertikal auszurichten?

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In unserer nächsten Aufgabe stellen wir Ihnen ein Set von drei Auswahlknöpfen zur Verfügung. Wir möchten, dass Sie diesen eine benutzerdefinierte Gestaltung geben.

Wir haben Ihnen bereits einen grundlegenden Reset zur Verfügung gestellt, auf dem Sie aufbauen können.

1. Entfernen Sie zunächst deren Standard-Styling.
2. Geben Sie den Auswahlknöpfen anschließend ein angemessenes Basis-Styling – das Styling, das sie haben, wenn die Seite zum ersten Mal geladen wird. Dies kann beliebig sein, aber Sie möchten wahrscheinlich eine Breite und Höhe (von etwa 18 bis 24 Pixel) sowie eine dezente Rand- und/oder Hintergrundfarbe festlegen.
3. Geben Sie den Auswahlknöpfen nun ein anderes Styling, wenn sie ausgewählt sind.
4. Richten Sie die Auswahlknöpfe schön mit den Beschriftungen aus.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In unserer letzten Aufgabe dieser Bewertungsreihe stellen wir Ihnen ein bereits schön gestaltetes Feedback-Formular zur Verfügung – etwas Ähnliches haben Sie bereits gesehen, wenn Sie unseren Artikel UI-Pseudoklassen durchgearbeitet haben, und nun möchten wir, dass Sie Ihre eigene Lösung entwickeln.

Was wir möchten, ist, dass Sie einige erweiterte Pseudoklassen verwenden, um nützliche Indikatoren für die Gültigkeit bereitzustellen.

1. Zuerst möchten wir, dass Sie ein spezifisches Styling bereitstellen, das visuell anzeigt, welche Eingaben ausgefüllt werden müssen – sie dürfen nicht leer bleiben.
2. Zweitens möchten wir, dass Sie einen nützlichen visuellen Indikator dafür bereitstellen, ob die in jede Eingabe eingegebenen Daten gültig sind oder nicht.