How to make only placeholder italics in input

Question

How can I format the text of a placeholder in italics, but when someone writes inside the textbox, the text shouldn't be in italics.

code:

<input type="text" id="search" placeholder="Search" style="font-style:italic"> 

How can I place italic text only on placeholder but not whole input?

Answer 1

Sure. Just apply the style to these CSS rules:

::-webkit-input-placeholder {    font-style: italic; } :-moz-placeholder {    font-style: italic;   } ::-moz-placeholder {    font-style: italic;   } :-ms-input-placeholder {      font-style: italic;  } 

Probably not all of these rules are needed. I always just reference CSS Tricks because I always forget how to do it.

Edit: Note that these rules cannot be combined into one selector. They must be declared separately as noted by Dave Kennedy in the comments below.

Answer 2

From MDN, you can use the :placeholder-shown pseudo-class.

input:placeholder-shown {    font-style: italic; } 

This has the advantage of being un-prefixed, and the browser support is decent (92-ish%) at the time of this writing: https://caniuse.com/#feat=css-placeholder-shown.