Suchfeld in Safari: Platzhalter abgeschnitten
Veröffentlicht: – Kommentar hinterlassen Letzte Aktualisierung:
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.
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)