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

Posted 2023-03-05

【中文标题】如何在输入中仅使用占位符斜体

【英文标题】：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">

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

【参考方案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;

【讨论】：

除了使占位符文本斜体之外，这是否还会使常规输入文本斜体？

这有一个不幸的效果，一旦空输入框获得焦点，它将失去斜体，而仍然有占位符。