📅 最后修改于: 2023-12-03 15:26:22.614000 🧑 作者: Mango
输入框的占位符文本是在用户没有输入任何内容的情况下显示的，默认情况下，这个文本会呈现一种浅灰色，非常简单，我们可以利用 CSS 来更改其颜色、字体等。
如何更改输入框占位符文本的样式呢？我们可以使用以下 CSS 属性：
::placeholder：选择器用于选取元素的占位符文本
color：用于指定占位符文本的颜色。
font-size：用于指定占位符文本的字体大小。
font-weight：用于指定占位符文本的字体加粗程度。
font-style：用于指定占位符文本的字体样式。
font-family：用于指定占位符文本的字体类型。
下面是一个代码片段，用于更改输入框占位符文本的样式:
<style>
input[type="text"]::placeholder {
/* 更改占位符文本的颜色 */
color: #999999;
/* 更改占位符文本的字体大小 */
font-size: 16px;
/* 更改占位符文本的字体加粗程度 */
font-weight: bold;
/* 更改占位符文本的字体样式 */
font-style: italic;
/* 更改占位符文本的字体类型 */
font-family: "Helvetica Neue", sans-serif;
}
</style>
<body>
<!-- 创建一个输入框 -->
<input type="text" placeholder="请输入内容...">
</body>
以上代码片段中，我们首先利用选择器 input[type="text"]::placeholder 来选取对应的占位符文本，然后使用各种 CSS 属性来更改其样式，包括颜色、字体大小、字体加粗程度、字体样式以及字体类型。
最后，我们在 <input> 元素上添加了一个 placeholder 属性，这个属性用来添加占位符文本。
通过以上的代码片段，我们可以轻松地更改输入框占位符文本的样式，从而让其更加符合我们的需求。