CSS 中的 Input Placeholder Selector

30 Jan 2025 | 4 分钟阅读

Placeholder 选择器是一个伪元素，用于在 CSS 中创建占位符文本设计。此选择器可以修改文本颜色和样式。

伪元素首先用于 CSS 属性。我们可以根据 Web 浏览器添加占位符伪元素。大多数浏览器默认将占位符文本显示为半透明或浅灰色。CSS 文本属性用于添加内联占位符文本的设计。

语法

以下语法显示了 CSS 中基本的占位符选择器。我们可以根据 Web 浏览器和元素使用它。类名、ID 名和元素都放在占位符元素之前。

::placeholder {
/* CSS properties */
  color: navy;
}
Or 
input::placeholder {
/* CSS properties */
  color: navy;
}

支持的样式属性

以下属性允许使用伪元素进行样式设置

字体属性
color
背景属性
单词间距
letter-spacing
text-decoration
垂直对齐
文本转换
行高
文本缩进
opacity

示例

这些示例展示了使用 CSS 伪元素实现的样式属性。

示例 1

以下示例展示了 CSS 中基本的输入占位符选择器。

<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
::placeholder {
background-color: grey;
padding: 10px;
color: white;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h2> Input Placeholder Selector in CSS </h2>
<h4> we can use basic ::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "fname" name = "first_name" placeholder = "First name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "lname" name = "last_name" placeholder = "Last name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>

输出

输出显示了占位符的样式。

示例 2

以下示例展示了 CSS 中基本的输入占位符选择器。我们可以在占位符的伪元素之前添加元素。我们使用简单的元素名称和元素的 ID 名称。

<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
#last_name::placeholder {
background-color: navy;
padding: 10px;
color: white;
}
input::placeholder {
background-color: beige;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> we can use basic element::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "First Name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "last_name" name = "last_name" placeholder = "Last Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>

输出

输出显示了占位符的样式。

示例 3

以下示例展示了 CSS 中用于样式设置的占位符选择器。我们可以将占位符的伪元素与浏览器一起使用。

<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
::-webkit-input-placeholder { 
/* Chrome/Opera/Safari browsers */
  background-color: yellow;
padding: 10px;
color: navy;
}
::-moz-placeholder { 
/* after Firefox 19 */
  background-color: yellow;
padding: 10px;
color: navy;
}
:-ms-input-placeholder { 

/* after IE 10 */
background-color: yellow;
color: navy;
}
:-moz-placeholder {
/* before Firefox 19 */
  background-color: yellow;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> We can use a basic placeholder for different browsers using the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "First Name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "last_name" name = "last_name" placeholder = "Last Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>

输出

输出显示了占位符的样式。

示例 4

以下示例展示了 CSS 中带有输入类型的占位符选择器。我们可以在占位符的伪元素之前添加 input 标签元素。我们使用所需的 HTML 元素和输入类型，例如 text 和 email。

<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
input[type="email"]::placeholder {
background-color: navy;
padding: 10px;
color: white;
}
input[type="text"]::placeholder {
background-color: beige;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> we can use basic input[type="type_name"]::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write First Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Write Email">
<br> <br>
<label for = "contact"> Contact Number: </label>
<input type = "number" id = "contact" name = "contact" placeholder = "Write Contact Number">
</form>
</body>
</html>

输出

输出显示了占位符的样式。

支持的浏览器

占位符选择器支持以下浏览器

谷歌浏览器
Microsoft Edge
火狐
Safari
Opera

结论

输入占位符选择器吸引用户填写数据。占位符选择器有助于填写正确的信息。

下一个主题CSS 中的堆栈元素

CSS 中的 Input Placeholder Selector

语法

支持的样式属性

示例

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 中的 Input Placeholder Selector

语法

支持的样式属性

示例

支持的浏览器

结论

相关帖子

如何在 CSS 中设置背景图片的透明度

Grouping Selector in CSS

Skeleton CSS

CSS Wrap

CSS Header

CSS Sliders

如何使用 CSS 将 Apple 的新 San Francisco 字体添加到网页

CSS Line Break

CSS Margin-left

Conditional Formatting in CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器