CODEWITHSUNDEEP
htmlcss
Shahriar Alif
Shahriar Alif

Reputation: 23

Css transform property is not working for Mozilla Firefox

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.

Upvotes: 2

Views: 410

Answers (1)

A Haworth
A Haworth

Reputation: 36426

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.

Upvotes: 2

Related Questions