如何通过CSS设置HTML Date输入框的交互式占位文本格式？

首先要明确：原生<input type="date">的默认提示文本（比如"mm/dd/yyyy"）是由浏览器根据系统语言/区域设置生成的，纯CSS无法直接修改这个内置文本，因为它不属于DOM可直接选择的内容。不过可以通过以下两种方案实现你的需求，同时保留交互性：

方案1：CSS隐藏原生提示，自定义伪元素模拟 #

通过CSS隐藏原生的提示文本，然后用伪元素添加自定义格式提示，同时保留原生日期选择器的交互功能。

/* 隐藏原生日期输入框的各部分文本 */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent;
}

/* 添加自定义格式提示（仅在未聚焦、未输入有效日期时显示） */
input[type="date"]:not(:focus):not(:valid):before {
    content: "dd/mm/aaaa";
    color: #999;
    position: absolute;
    padding: 2px 4px;
}

/* 给日期输入框设置相对定位，确保伪元素位置正确 */
input[type="date"] {
    position: relative;
}

注意：不同浏览器的伪元素前缀可能有差异，比如Firefox或Edge需要调整对应的选择器。当用户点击输入框（获取焦点）或已输入有效日期时，伪元素会自动隐藏，不影响原生交互。

方案2：原生JS批量处理（无需jQuery） #

如果CSS方案的兼容性不能满足需求，可以用原生JS批量处理所有日期输入框，设置自定义占位逻辑，同时保留原生选择器。

// 获取页面上所有type="date"的输入框
const dateInputs = document.querySelectorAll('input[type="date"]');

dateInputs.forEach(input => {
    // 初始状态：无值时显示自定义提示
    if (!input.value) {
        input.dataset.placeholder = "dd/mm/aaaa";
        input.style.color = "#999";
        input.value = "dd/mm/aaaa";
    }

    // 聚焦时清空提示，显示原生日期选择器
    input.addEventListener('focus', () => {
        if (input.value === input.dataset.placeholder) {
            input.value = "";
            input.style.color = "";
        }
    });

    // 失焦时如果为空，重新显示提示
    input.addEventListener('blur', () => {
        if (!input.value) {
            input.value = input.dataset.placeholder;
            input.style.color = "#999";
        }
    });

    // 表单提交时清除提示文本，避免无效值被提交
    input.form?.addEventListener('submit', () => {
        if (input.value === input.dataset.placeholder) {
            input.value = "";
        }
    });
});

这个方案可以批量处理页面上所有日期输入框，无需逐个修改，同时完全保留原生日期选择器的交互功能，兼容性更广泛。

内容的提问来源于stack exchange，提问作者psygo