Beschränkt man die Breite eines Suchfeldes, verwendet aber einen entsprechend langen Platzhalter-Text, so wird dieser bereits vor Ende des Eingabefelds abgeschnitten. Wieso? Weil Safari hier Platz für ein Icon lässt, das bei eingegebenem Text das Textfeld wieder leeren kann.

Platzhalter „Suche“ falsch
Platzhalter „Suche“ falsch
Platzhalter „Suche“ korrekt
Platzhalter „Suche“ korrekt

Da aber das entsprechende Icon gar nicht angezeigt wird, wenn nur der Platzhalter-Text angegeben wird, ergibt das für mich nicht unbedingt Sinn. Glücklicherweise lässt sich dieser Bereich anpassen, indem das Pseudo-Element für das Icon ausgeblendet wird, sofern der Platzhalter angezeigt wird.

Das geht mit folgendem CSS:

input[type="search"]:placeholder-shown::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
Code-Sprache: CSS (css)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.