ATOZ CSS快速提示：占位符文字

本文是 AtoZ CSS 系列的一部分。您可以在这里找到该系列的其他条目。您可以查看其对应视频伪元素的完整文本和屏幕截图。

欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探讨以字母表中不同字母开头的各种 CSS 值（和属性）。我们知道，有时屏幕截图是不够的，因此在本文中，我们添加了一个关于样式占位符文本的新技巧。

P 代表占位符文本

伪元素 :before 和 :after 非常适合构建复杂的设计功能，而不会使用非语义元素使标记混乱。其他伪元素，如 :first-line 和 :first-letter，使我们可以访问 HTML 文档中未标记的元素部分的样式。

我们在伪元素屏幕截图中查看了许多这些内容，但我们没有查看的一个伪元素是用于设置占位符文本的样式。让我们来解决这个问题。

选择输入占位符

首先，让我们想象一下以下 HTML：

<input class="name-field" type="text" placeholder="Enter your name">

我们可以将输入文本的颜色设置为红色，如下所示：

.name-field {
  color: red;
}

我们还可以根据其占位符属性选择和设置输入的样式：

input[placeholder="Enter your name"] {
  color: red;
}

但这仍然会设置输入字段中键入的任何用户输入文本的样式，而不是设置占位符文本本身的外观。为此，我们需要一系列针对占位符伪元素的供应商前缀选择器。

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

这看起来像是重复，但不幸的是，没有更简洁（Don’t Repeat Yourself）的方法来做到这一点。

以下方法无效：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

这是因为任何浏览器都必须能够“理解”逗号分隔系列中的每个选择器，才能应用大括号内的样式。

使用 Sass 设置占位符样式

解决这种重复 CSS 的一种方法是使用 Sass 混合宏。这是我在 99% 的项目中使用的：

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

这允许我使用单个 Sass @include 在所有浏览器中设置占位符的样式，这有助于使代码更短、更易于维护。

设置占位符样式时注意特异性

在 IE 浏览器中，设置输入的样式可能会覆盖为占位符文本设置的样式。

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中将为蓝色 */
}

确保 IE 占位符样式具有更高的特异性，以便它们按预期显示。这甚至可能是使用 !important 的一个案例，但在使用这个强大的工具时务必小心。

注意占位符的不透明度

在 Firefox 中，占位符文本的默认不透明度约为 0.5，因此除非您还设置 opacity: 1，否则在占位符上设置 color: red 将导致颜色变暗。

即使您使用 Normalize.css，也不会为您重置此项。如果完全不透明的占位符对您的项目至关重要，请记住此技巧！

关于 CSS 占位符文本的常见问题解答 (FAQ)

如何更改 CSS 中占位符文本的颜色？

可以通过使用 ::placeholder 伪元素来更改 CSS 中占位符文本的颜色。此伪元素允许您设置输入或文本区域元素中占位符文本的样式。以下是如何将颜色更改为红色的示例：

<input class="name-field" type="text" placeholder="Enter your name">

请记住，浏览器兼容性很重要。对于 Firefox，使用 ::-moz-placeholder；对于 Internet Explorer，使用 :-ms-input-placeholder；对于 Chrome、Safari 和 Opera，使用 ::-webkit-input-placeholder。

我可以更改占位符文本的字体大小吗？

是的，您可以更改占位符文本的字体大小。就像更改颜色一样，您可以使用 ::placeholder 伪元素来更改字体大小。这是一个示例：

.name-field {
  color: red;
}

这会将占位符文本的字体大小更改为 18px。

是否可以更改占位符文本的字体样式？

绝对可以，您可以更改占位符文本的字体样式。您可以使其为斜体、粗体或任何您想要的其他样式。以下是如何使其为斜体的示例：

input[placeholder="Enter your name"] {
  color: red;
}

这会将占位符文本的字体样式更改为斜体。

我可以更改占位符文本的不透明度吗？

是的，您可以更改占位符文本的不透明度。这可以通过在 CSS 中使用 opacity 属性来完成。这是一个示例：

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

这会将占位符文本的不透明度更改为 0.5，使其半透明。

如何向占位符文本添加背景颜色？

不幸的是，您无法向占位符文本添加背景颜色。::placeholder 伪元素仅允许您设置占位符文本的颜色、字体大小、字体样式和不透明度。它不支持 background-color 等其他属性。

我可以在占位符文本上使用 CSS 动画吗？

不可以，您无法在占位符文本上使用 CSS 动画。::placeholder 伪元素不支持 CSS 动画或过渡。

是否可以以不同的方式设置不同的占位符样式？

是的，您可以以不同的方式设置不同的占位符样式。您只需要为每个输入或文本区域元素使用不同的类或 ID。这是一个示例：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

这将使具有类“input1”的输入中的占位符文本为红色，而具有类“input2”的输入中的占位符文本为蓝色。

我可以将伪类与 ::placeholder 一起使用吗？

不可以，您不能将 :hover、:active 或 :focus 等伪类与 ::placeholder 一起使用。::placeholder 伪元素不支持伪类。

是否可以使用 CSS 更改占位符文本？

不可以，您不能使用 CSS 更改占位符文本。占位符文本的内容只能使用 HTML 更改。

我可以在 ::placeholder 中使用媒体查询吗？

是的，您可以在 ::placeholder 中使用媒体查询。这允许您根据屏幕大小或设备以不同的方式设置占位符文本的样式。这是一个示例：

<input class="name-field" type="text" placeholder="Enter your name">

这会将屏幕宽度为 600px 或更小的屏幕上的占位符文本的颜色更改为红色。

以上是ATOZ CSS快速提示：占位符文字的详细内容。更多信息请关注PHP中文网其他相关文章！