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

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 Tricks因为我总是忘记怎么做。

编辑：请注意，这些规则无法合并到一个选择器中。必须按照Dave Kennedy在下面的评论中单独声明它们。

Answer 2

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

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

这具有不加前缀的优势，并且在撰写本文时https://caniuse.com/#feat=css-placeholder-shown对浏览器的支持还不错（92-ish％）。

Answer 3

另一种方式：焦点选择器是你的朋友。要仅为占位符使用：not选择器。仅当输入字段不是当前选择时，才具有CSS规则。 在CSS中定义：

.class-of-your-input-field:not(:focus) {
font-style:italic;
}