Make preview text in form italic

Question

I have a script that erases the default value text in the form when the user clicks in the field, but how can I make the value text appear in italics? If I change the input in my CSS to font-style: italic then when the user types it appears in italics too and I just want the "preview text" to be in italics and then normal when the user is typing.

Answer 1

Style the ::placeholder pseudo-element for the field:

.field::placeholder {
  font-style: italic;
}

<input type="email" class="field" placeholder="[email protected]">

<input type="email" class="field" placeholder="[email protected]"
       value="[email protected]">