如何在打印HTML页面时隐藏date输入框的'mm/dd/yyyy'占位符

第一步：修正HTML中的ID重复问题 #

你的原始HTML里所有日期输入框的id都是date，这不符合HTML规范（ID必须唯一），会导致标签关联失效，先修正为唯一ID：

<table>
 <tr>
  <td><label for="date-sunday">Sunday:</label></td>
  <td><label for="date-monday">Monday:</label></td>
  <td><label for="date-tuesday">Tuesday:</label></td>
  <td><label for="date-wednesday">Wednesday:</label></td>
  <td><label for="date-thursday">Thursday:</label></td>
  <td><label for="date-friday">Friday:</label></td>
  <td><label for="date-saturday">Saturday:</label></td>
 </tr>
 <tr>
  <td><input type="date" id="date-sunday" name="Sunday"></td>
  <td><input type="date" id="date-monday" name="Monday"></td>
  <td><input type="date" id="date-tuesday" name="Tuesday"></td>
  <td><input type="date" id="date-wednesday" name="Wednesday"></td>
  <td><input type="date" id="date-thursday" name="Thursday"></td>
  <td><input type="date" id="date-friday" name="Friday"></td>
  <td><input type="date" id="date-saturday" name="Saturday"></td>
 </tr>
</table>

第二步：用CSS媒体查询实现打印时隐藏占位符 #

通过@media print媒体查询，针对日期输入框的占位符设置透明色，打印时占位符文本会消失，但输入框、日历图标和交互功能完全保留：

/* 屏幕显示时保留占位符默认样式 */
input[type="date"]::placeholder {
  color: initial;
}

/* 打印时隐藏占位符，兼容不同浏览器渲染逻辑 */
@media print {
  /* 适配部分浏览器的伪元素占位符 */
  input[type="date"]::before {
    color: transparent !important;
  }
  /* 适配WebKit内核浏览器的拆分字段样式 */
  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 !important;
  }
}

说明 #

不同浏览器对日期输入框的占位符渲染逻辑有差异，所以需要同时覆盖两种常见的渲染方式，确保在所有主流浏览器中都能实现「屏幕显示占位符、打印时隐藏」的效果，且完全不影响输入框的正常功能。

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