cssplaceholder

Make preview text in form italic

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.

Solution

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

    .field::placeholder {
  font-style: italic;
}
    <input type="email" class="field" placeholder="you@example.com">

<input type="email" class="field" placeholder="you@example.com"
       value="filled@example.com">