如何在输入中仅使用占位符斜体答案

【问题标题】：How to make only placeholder italics in input如何在输入中仅使用占位符斜体
【发布时间】：2015-02-23 00:13:29
【问题描述】：

如何将占位符的文本格式化为斜体，但是当有人在文本框内书写时，文本不应该是斜体。

代码：

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

如何将斜体文本仅放置在占位符而不是整个输入上？

【问题讨论】：

标签： html input placeholder

【解决方案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，因为我总是忘记怎么做。

编辑：请注意，这些规则不能合并到一个选择器中。它们必须单独声明，如以下 cmets 中的 Dave Kennedy 所述。

【讨论】：

不幸的是，这些规则似乎必须单独声明，即::-webkit-input-placeholder, ::-moz-placeholder { font-style: italic; } 不起作用。
@DaveKennedy 是的，你是对的。我也注意到了。但是，我不确定为什么会这样。
@DaveKennedy @JosephMarikle 这是CSS3 Spec 的一部分。具体来说：包含无效选择器的一组选择器无效。因此，因为 Firefox 将 :-ms-input-placeholder 视为无效，它使整个选择器组无效。这就是为什么您需要将它们分开。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

除了使占位符文本斜体之外，这是否还会使常规输入文本斜体？
这有一个不幸的效果，一旦空输入框获得焦点，它将失去斜体，而仍然有占位符。