必填星号需手动添加，不能依赖required属性自动显示；推荐用label包裹文字与红色星号，并通过for与input的id关联，同时设置aria-required="true"确保可访问性。
date input 的必填星号不能靠 required 属性自动显示
HTML 原生 <input type="date"> 的 required 属性只触发表单校验逻辑，不会在 UI 上渲染星号（*）。浏览器根本不提供这个视觉反馈——它和 <input type="text"> 一样，得手动加标记。
用 label + CSS 伪元素最稳妥
把星号放在 <label></label> 里，配合 for 关联 id，既语义正确又兼容所有浏览器：
<label for="birthDate">出生日期<span style="color: red;">*</span></label> <input type="date" id="birthDate" name="birthDate" required>
注意点：
-
id和for必须严格一致，大小写敏感 - 别用
<label><input></label>包裹方式——部分屏幕阅读器对type="date"的支持不稳定 - 星号颜色建议用
color: red或 CSS 变量统一控制，避免硬编码
如果要用 CSS ::after 生成星号，得加 aria-required
纯 CSS 方案（不改 HTML 结构）可行，但必须补足可访问性：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
label[for="birthDate"]::after {
content: " *";
color: red;
}
<label for="birthDate">出生日期</label>
<input type="date" id="birthDate" name="birthDate" required aria-required="true">
关键原因：
-
aria-required="true"是给读屏软件看的，否则它可能忽略这个字段的必填状态 -
::after生成的内容不进 DOM 树，JS 无法通过textContent检测，也不被搜索引擎识别 - 某些老版本 Safari 对
input[type=date]的required提示框位置异常，CSS 星号反而更可控
别踩这些坑
常见翻车点：
- 直接在
<input>上加placeholder="*"——type="date"不支持 placeholder - 用 JavaScript 动态插入星号但没同步更新
aria-describedby—— 读屏用户会漏掉提示 - 给
<input>设title="必填"—— 这个 tooltip 在移动端基本不触发，且和星号视觉不匹配 - 用
<span>*</span>放在<input>后面 —— 焦点顺序错乱，键盘 Tab 到输入框后，星号在右侧容易被误认为是辅助文字
星号本质是「视觉契约」，它得和 required、aria-required、焦点流三者对齐，缺一不可。
