How to make only placeholder italics in input

html input placeholder
prabin badyakar picture prabin badyakar · Dec 25, 2014 · Viewed 50.5k times · Source

Hi can any one tell me how can i make only placeholder italics but when someone writes inside a test box , written word shouldnt have italics.

MyCode:

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

How can i place italic on only placeholder not whole input???

Answer

Joseph Marikle picture Joseph Marikle · Dec 25, 2014

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.

Related questions

Setting an HTML text input box's "default" value. Revert the value when clicking ESC

When a web form is written to the browser, the browsers remembers what the initial values are of a text INPUT box. ie. when it receives HTML like this: <input type="text" value="something"> The browser remembers "something" …

Read More
HTML Input - already filled in text

I was wondering, is there a way to put text into an input field? What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for. I'm looking for an (kind of) …

Read More
How to change placeholder color of specific input field?

I want to change the color of specific place holder. I'm using many input fields for my project, problem is that in some section i need grey color for placeholder and in some section i need white color for placeholder. …

Read More