答案：:placeholder-shown伪类可在输入框显示占位符时设置样式，支持颜色、字体、边框等样式控制，并通过JavaScript模拟实现兼容性处理。
HTML中设置占位显示样式，主要靠
:placeholder-shown这个伪类。它允许你在 input 或 textarea 元素显示 placeholder 文本时，应用特定的样式。这让你可以更精细地控制用户未输入内容时的视觉效果，提升用户体验。
解决方案：
:placeholder-shown伪类只有在 input 或 textarea 元素显示 placeholder 属性时才会被激活。这意味着你可以改变文本颜色、背景色、字体大小等等，来突出显示 placeholder，或者在用户开始输入后，将样式恢复到默认状态。
例如，你可以让 placeholder 文本显示为浅灰色，并在用户开始输入时，将文本颜色变为黑色。
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: lightgray;
}
input:not(:placeholder-shown) {
color: black;
}这个例子中，
input::placeholder选择器设置了 placeholder 文本的默认颜色为浅灰色。
:not(:placeholder-shown)伪类选择器则会在 input 元素不再显示 placeholder 文本时（即用户开始输入时）应用样式，这里将文本颜色设置为黑色。
除了颜色，你还可以修改其他样式，比如字体大小、背景颜色、边框等等。
input::placeholder {
font-style: italic;
opacity: 0.7;
}
input:not(:placeholder-shown) {
font-style: normal;
opacity: 1;
}这段代码让 placeholder 文本显示为斜体，并降低了透明度。当用户开始输入时，字体样式恢复正常，透明度也变为 1。
需要注意的是，并非所有浏览器都完全支持
:placeholder-shown伪类。虽然现代浏览器基本都支持，但为了兼容老版本浏览器，你可能需要使用一些 JavaScript 方案作为备选方案。例如，你可以监听 input 元素的
input事件，并根据输入框的值是否为空来动态添加或移除 CSS 类。
const inputElement = document.querySelector('input');
inputElement.addEventListener('input', () => {
if (inputElement.value === '') {
inputElement.classList.add('placeholder-visible');
} else {
inputElement.classList.remove('placeholder-visible');
}
});然后，在 CSS 中，你可以使用
.placeholder-visible类来应用 placeholder 显示时的样式。
input::placeholder {
color: lightgray;
}
input.placeholder-visible {
color: lightgray; /* 兼容不支持 :placeholder-shown 的浏览器 */
}
input:not(.placeholder-visible) {
color: black;
}这样，即使在不支持
:placeholder-shown的浏览器中，也能实现类似的占位显示效果。
:placeholder-shown的兼容性如何？
现代浏览器，包括 Chrome、Firefox、Safari 和 Edge，都支持
:placeholder-shown伪类。 然而，一些老版本的浏览器可能不支持。为了确保你的网站在各种浏览器上都能正常工作，最好进行兼容性测试，并在必要时提供备选方案，比如上面提到的 JavaScript 方法。
如何使用 JavaScript 模拟
:placeholder-shown行为？
如果需要更全面的兼容性，可以使用 JavaScript 来模拟
:placeholder-shown的行为。这通常涉及到监听 input 元素的
focus和
blur事件，以及检查 input 元素的值是否为空。
const inputElement = document.querySelector('input');
inputElement.addEventListener('focus', () => {
inputElement.classList.remove('placeholder-visible');
});
inputElement.addEventListener('blur', () => {
if (inputElement.value === '') {
inputElement.classList.add('placeholder-visible');
}
});
// 初始状态检查
if (inputElement.value === '') {
inputElement.classList.add('placeholder-visible');
}这段代码在 input 元素获得焦点时移除
placeholder-visible类，在失去焦点且值为空时添加该类。初始状态也进行了检查，确保在页面加载时 placeholder 样式正确显示。 这种方法虽然稍微复杂一些，但可以提供更广泛的浏览器兼容性。
除了颜色，
:placeholder-shown还能控制哪些样式？
:placeholder-shown伪类不仅可以控制文本颜色，还可以控制许多其他的 CSS 属性，例如字体大小、字体样式、背景颜色、边框等等。这让你能够创建各种各样的占位显示效果。
例如，你可以让 placeholder 文本显示为斜体，并添加一个虚线边框。
input::placeholder {
font-style: italic;
border: 1px dashed gray;
}
input:not(:placeholder-shown) {
font-style: normal;
border: none;
}这段代码让 placeholder 文本显示为斜体，并添加了一个灰色的虚线边框。当用户开始输入时，字体样式恢复正常，边框也会被移除。 你可以根据自己的需求，自由组合各种 CSS 属性，创造出独特的占位显示效果。
