在网页开发中，往往是一些细微之处能够提升用户体验，让网站脱颖而出。CSS:placeholder-shown中的伪类会在占位符文本可见时选中输入元素，从而方便地区分空字段和包含用户输入的字段。这使得您可以创建动态样式，并通过提供视觉反馈来改善用户体验。

请看这个简洁的例子，我们对空的输入字段应用了一种微妙的效果。

构建表单

我们首先来设置表单的 HTML 结构。每个输入字段都包含一个占位符文本，并被分配一个名为.highlight-empty.

<form>
<input type=”text” placeholder=”Enter your name” class=”highlight-empty”>
<input type=”email” placeholder=”Enter your email” class=”highlight-empty”>
</form>

使用 CSS 应用样式

一旦我们确定了表单结构，就可以开始设置输入字段的样式，而:placeholder-shown伪类的使用在这里至关重要。

input {
font-size: 0.9rem;
margin: 10px;
padding: 5px;
width: 20%
}

.highlight-empty:placeholder-shown {
border: 2px solid lightcoral;
box-shadow: 0 0 5px lightcoral;
}

html, body {
background: #333;
}

body {
padding-top: 4em;
}

form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

了解 CSS 代码

在上面的 CSS 代码中，我们使用:placeholder-shown伪类为输入框添加了浅珊瑚色边框和柔和的发光效果，当输入框为空并显示占位符文本时，效果会消失。一旦用户开始输入，该效果就会消失，表明输入框已填写完毕。

.highlight-empty:placeholder-shown {
border: 2px solid lightcoral; /* Adds a light coral border to empty fields */
box-shadow: 0 0 5px lightcoral; /* Adds a subtle glow to empty fields */
}

其他应用的 CSS 属性包括输入字段的样式（input）、body 元素的样式（body）以及表单元素的排列方式（form）。不过，您很可能需要在更复杂的结构中工作。例如，您可能需要input在特定的表单组件中应用样式，而不是全局应用。同样，form这里的样式也比较基础，通常需要根据您网站的布局和设计要求进行调整。

探究最终结果

请查看下面的 GIF 动画，了解这段代码的实际运行效果。

placeholder-shown

为了进一步自定义，您可以尝试不同的边框样式、颜色和阴影属性。此外，您还可以结合:placeholder-shown其他 CSS 选择器（例如 `<div>` :not）来为不同的输入状态创建效果。

💡专业提示：请注意， :placeholder-shown `selected` 会选中输入框本身，而 ` ::placeholder styled` 会设置文本样式。因此，由于占位符文本与其父元素的关系，其样式可能会受到影响。