Menu
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?
695
From MDN, you can use the :placeholder-shown pseudo-class. 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.
<input type="text" placeholder="A red placeholder text..">
The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
The “placeholder” property is used to get or set the placeholder of an input text. This can be used to change the placeholder text to a new one. The element is first selected using a jQuery selector. The new placeholder text can then be assigned to the element's placeholder property.
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.
168
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
