如何隐藏type="date"输入框的默认dd/mm/yyyy占位符？

针对你遇到的用text-transparent无法彻底隐藏date输入框原生占位符（包括日历拾取器内提示）的问题，可以通过浏览器原生伪元素CSS来解决，以下是兼容主流浏览器的方案：

核心CSS代码 #

/* 针对WebKit内核浏览器（Chrome、Edge、Safari）隐藏输入框内的日期占位符 */
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;
}

/* 当输入框已选择日期时，恢复文本颜色 */
input[type="date"]:not(:placeholder-shown)::-webkit-datetime-edit-text,
input[type="date"]:not(:placeholder-shown)::-webkit-datetime-edit-month-field,
input[type="date"]:not(:placeholder-shown)::-webkit-datetime-edit-day-field,
input[type="date"]:not(:placeholder-shown)::-webkit-datetime-edit-year-field {
  color: #333 !important; /* 替换为你页面的默认文本颜色 */
}

/* 针对Firefox浏览器处理占位符 */
input[type="date"]::before {
  content: "";
}
input[type="date"]:not(:placeholder-shown)::before {
  content: attr(value);
}

使用说明 #

1. 将上述CSS添加到全局样式文件或组件<style>标签中
2. 移除原代码中无效的text-transparent、placeholder-shown:text-transparent等样式，保留基础布局类即可，修改后的输入框代码示例：

<input
  id="date-picker"
  ref="dateEle"
  v-model="selectedDate"
  type="date"
  class="block w-full select-none rounded-lg border bg-transparent p-3.5 focus:border-onLight-300 focus:ring-onLight-300"
/>

补充说明 #

date类型输入框的占位符是浏览器原生实现的，不同浏览器的日历拾取器样式差异较大，上述方案能覆盖绝大多数主流浏览器场景。如果仍有个别浏览器的日历拾取器内存在提示，目前没有通用CSS方案可以完全隐藏，这种情况下可以考虑使用第三方日期选择器组件（如Element Plus的DatePicker）替代原生控件，获得更统一的样式控制。

内容的提问来源于stack exchange，提问作者Ashly Antony Babu