How to make only placeholder italics in input
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.
Another way: the :focus selector is your friend. To make it only for the placeholder use the :not selector. This have the CSS rule only if the input field is NOT current selection. Define in your CSS :
.class-of-your-input-field:not(:focus) {
font-style:italic;
}
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.