The input have a padding for the clean icon. But due to this padding, the placeholder is shifted too.
We can fixed this issue by using :placeholder-shown and apply the padding only if input:not(:placeholder-shown)
The padding can be computed properly by used the css property :has in order to check if the showSearchButton element is visible.
But :has is not supported by all browser.
So the solution is to applied a background color on the vtmn-search_buttons and reduce the padding-inline-end to match the same as padding-inline-start
Edit 12/06 :
The second solution with a background-color is not possible, when we use it with a disabled input, the white color stay on the input.
:has property is not possible because the input is not a parent of the vtmn-search_buttons
The input have a padding for the clean icon. But due to this padding, the placeholder is shifted too. We can fixed this issue by using :placeholder-shown and apply the padding only if input:not(:placeholder-shown)
https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
Edit:
The padding can be computed properly by used the css property
:hasin order to check if theshowSearchButtonelement is visible. But:hasis not supported by all browser. So the solution is to applied a background color on thevtmn-search_buttonsand reduce thepadding-inline-endto match the same aspadding-inline-startEdit 12/06 :
The second solution with a background-color is not possible, when we use it with a disabled input, the white color stay on the input.
:hasproperty is not possible because the input is not a parent of thevtmn-search_buttons