According to https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder in its
selector.
and looking at the list for ::first-line it does not include transform. It seems however that Chrome (and also therefore Edge) will do the transform on the placeholder, though they won’t on the first-line as far as I can tell.
Every other properties are working except transform for Mozilla
.search-input::placeholder{
color: rgba(87, 87, 86, 0.8);
text-transform: uppercase;
letter-spacing: 1.5px;
transform: translateX(5%);
-moz-transform: translateX(5%);
}
<input class="search-input" type="text" placeholder="Search">
NB: I’ve tried .search-input::-moz-placeholder too.
I’ve been trying a few things on my end – good possibility its not supported. Maybe you can try
Actually I was trying to place a search icon before the placeholder. That’s why I needed to shift it a bit.