如何在输入中只使用占位符斜体

Question

嗨,任何人都可以告诉我,我怎么能只做占位符斜体,但当有人在测试盒内写字时,书面文字不应该有斜体.

mycode的:

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

我怎么能把斜体放在占位符上而不是整个输入？

Answer 1

当然.只需将样式应用于这些CSS规则:

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

可能并非所有这些规则都是必需的.我总是只参考CSS技巧,因为我总是忘记怎么做.

编辑:请注意,这些规则不能合并为一个选择器.必须按照Dave Kennedy在下面的评论中单独声明它们.

Answer 2

从MDN，您可以使用:placeholder-shown伪类。

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

这具有不带前缀的优点，并且在撰写本文时浏览器支持不错 (92-ish%)：https : //caniuse.com/#feat=css-placeholder-shown。