如何用纯JS/HTML/CSS实现点击日历图标选日期且不显示输入框

云上老周

2026-9-3

最优实现方案

不要通过缩窄原生日期输入框宽度来适配图标，这种方式依赖不同浏览器的输入框内部布局，必然会出现兼容性问题。推荐使用透明原生输入框覆盖层方案，既保留原生日期选择面板的交互，又能实现仅显示日历图标、点击弹出面板的效果，无跨浏览器兼容问题。

实现代码

HTML结构

<div class="date-selector">
  <!-- 自定义日历图标，可替换为任意图标字体、svg图片资源 -->
  <span class="icon-calendar">📅</span>
  <input type="date" class="origin-date-input">
</div>

CSS样式

.date-selector {
  position: relative;
  display: inline-block;
  /* 按实际图标尺寸设置宽高即可 */
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.icon-calendar {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 22px;
  font-size: 18px;
}

.origin-date-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

/* 适配webkit内核浏览器（Chrome、Edge、Safari），确保点击全区域都能触发面板 */
.origin-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}