Use something like this. The Input itself has 25px font, the placeholder also but is scaled 0.6 and will be 15px. Works in Safari Chrome and Edge Why is this not working in Firefox?

&::placeholder {
font-size: 25px;
letter-spacing: normal;
transform: scale(0.6);
}

//this would be better in my opinion
::placeholder:read{}
:placeholder:write{}

@Mohit Pilania text-align is not supported by all browsers.
Instead:

:root {
  /* Magic numbers! Set them to another value if you like. */
  --w: 30px
  --h: 30px
}
/* You'll need to create container of the #comments-form-email, so that text-align: left = text-align: right */
#comments-form-email-container {
  width: calc(var(--w) + 2px);
  height: calc(var(--h) + 2px);
}
#comments-form-email {
  width: var(--w);
  height: var(--h);
  text-align: right; /* This will also set the text-align of your #comments-form-email, but since this element is wrapped by a container with the same width and height, so it should be fine. */
#comments-form-email:focus {
  text-align: left; /* Usually when you focus on something, it means you're ready to type, so when you focus on #comments-form-email, it's placeholder will disappear, so you'll set it's text-align back to default (which is left). */
}

Thanks! I’ve been struggling with this for days. You just cured my headache.

Nice. But would it be okay to remove the element qualifier from these declarations? If not they’ll only be applied to input tags and not, for example, textarea tags.

Thanks Ruslan!

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:transparent;
}

input:-moz-placeholder { /* Firefox 18- */
color:transparent;
}

input::-moz-placeholder { /* Firefox 19+ */
color:transparent;
}

input:-ms-input-placeholder { /* IE */
color:transparent;
}

input::-ms-input-placeholder { /* IE Edge */
color:transparent;
}

It won’t work if you write it all together. I tried it

Thank you, thats what I looking for

After 3 year you saved my life ahahah thx man