Search input in Safari: Cropped placeholder

If you limit the width of a search field, and use a long placeholder text, this text will be cropped before the end of the input field. Why? Because Safari reserves some space for an icon that will be displayed to clear the input field if you’ve entered a value.

Since the icon won’t be displayed as long as you didn’t enter a text and thus only shows the placeholder text, it doesn’t make sense to me to reserve that space. Luckily, you can adjust this space by hiding the pseudo element for this icon if the placeholder is shown.

This works with the following CSS:

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

Leave a Reply Cancel reply