数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 CSS :placeholder-shown 自定义空文本输入样式
要自定义带有占位符的输入文本框的样式，我们使用 CSS 的 :placeholder-shown 伪类。占位符文本是给用户的提示，以便理解在输入文本字段中应该输入什么内容。
以下示例说明了 CSS :placeholder-shown 伪类。
设置文本字段的边框
文本字段的边框使用 border-color 属性设置。将其放在 placeholder-shown 伪类内，如下所示：
input:placeholder-shown {
border-color: dodgerblue;
}
示例
让我们来看一个示例：
<!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>
设置文本字段的背景颜色
文本字段的背景颜色使用 background 属性设置。将其放在 placeholder-shown 伪类内，如下所示：
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
示例
让我们来看一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="email" placeholder="Enter your email-id">
<input type="text">
</body>
</html>
转换占位符文本
text-transform 属性用于转换网页上的占位符文本。它可以转换为大写、全部大写、全部小写等。我们将占位符文本更改为全部大写。
将其放在 placeholder-shown 伪类内，如下所示：
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
示例
让我们来看一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
转换占位符文本字符之间的间距
letter-spacing 属性用于设置占位符文本字符之间的间距。将其放在 placeholder-shown 伪类内，如下所示：
input:placeholder-shown {
letter-spacing: 4px;
}
示例
让我们来看一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
letter-spacing: 4px;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
更新于：2024年1月2日
浏览量：260
广告