Safari 15桌面版：如何将date类型输入框默认值设为空

Safari 15对type="date"输入框的默认行为确实和Chrome不同——未设置value时会自动填充当前日期，而非显示占位符样式的提示文本。要实现空值状态，可以通过以下几种方式处理：

• 显式设置空值
  直接给date输入框添加value=""属性，强制浏览器保持空值状态，避免自动填充当前日期：

  <input type="date" name="target-date" value="">
  

• CSS自定义视觉表现（针对Safari）
  如果上述方法无效，可以通过Safari的私有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"]:focus::-webkit-datetime-edit-text,
  input[type="date"]:focus::-webkit-datetime-edit-month-field,
  input[type="date"]:focus::-webkit-datetime-edit-day-field,
  input[type="date"]:focus::-webkit-datetime-edit-year-field {
    color: inherit;
  }
  

• JavaScript强制初始化
  若页面加载后仍出现自动填充的情况，可通过JS在DOM加载完成后强制清空未设置值的date输入框：

  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('input[type="date"]').forEach(input => {
      if (!input.value) input.value = '';
    });
  });
  

需要注意的是，测试表单重置等场景下的表现，确保空值状态在用户交互过程中保持一致。

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