使用 CSS :placeholder-shown 自定义空文本输入框的样式

cssweb developmentfront end technology更新于 2024/8/27 17:16:17

为了自定义包含占位符的输入文本框的样式，我们使用 CSS 的 :placeholder-shown 伪类。

示例

以下示例演示了 CSS :placeholder-shown 伪类。

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
   border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: orange;
   background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html>