Solution 1 :

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.

Problem :

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.

Comments

Comment posted by XLIME

I’ve been trying a few things on my end – good possibility its not supported. Maybe you can try

Comment posted by Shahriar Alif

Actually I was trying to place a search icon before the placeholder. That’s why I needed to shift it a bit.

By