CSS Ecken abrunden

[Gunnar Bittersmann]

@@JJ

Suchfeld mit Lupe links

Wozu das div? Du hast doch schon ein Containerelement. Wenn du dem form-Element die Klasse search-container verpasst, kannst du das div entsorgen.

Allerdings hast du kein Suchfeld. Mit role="search" hast du eins:

<form role="search" class="search-container">
  <label for="search">
    ⋮

Oder mit dem neuen search-Element, das aber noch so neu ist, dass man da wohl auch noch ein paar Tage das role-Attribut braucht:

<search role="search">
  <form class="search-container">
    <label for="search">
      ⋮

(Es ist noch so neu, dass es bislang weder in Can I Use noch in MDN auftaucht.)

---

Es kann auch nicht schaden, den Typen des Eingabefelds auf search zu ändern. Bei virtuellen Tastaturen (Smartphones, Tablets, …) hat die Call-to-action-Taste dann eine angepasste Beschriftung.

... ist typografischer Frevel. Da ist das Auslassungszeichen … zu verwenden – im Deutschen mit Leerzeichen davor. Wenn du das Zeichen nicht irgendwoher (von hier oder aus der Zeichentabelle) rauskopieren willst, kannst du in HTML auch … verwenden.

<input type="search" id="search" name="search" placeholder="Suche …">

---

als Button

Button ist ein gutes Stichwort. Das Formular hat keinen. Klar, es kann mit Enter-Taste abgeschickt werden. Aber wissen das alle Nutzer? Ich bin mir nicht sicher, ob es nicht einen Submit-Button bräuchte. Ich werd bei nächster Gelegenheit mal nachfragen.

🖖 Живіть довго і процвітайте