Firefox中如何隐藏<input type="date">的日历弹窗？

确实，Firefox对date类型输入框的样式控制不如Chrome直接，但不用把type改成text，还有这几个实用办法：

• 利用Firefox专属CSS属性隐藏日历触发逻辑
  现代Firefox支持通过-moz-appearance调整输入框的表现，配合伪元素隐藏触发按钮，就能彻底阻止日历弹窗弹出，同时保留date类型的原生特性（比如表单验证、自动日期格式识别）：

  /* 隐藏Firefox的日历触发按钮 */
  input[type="date"]::-moz-calendar-picker-indicator {
    display: none;
  }
  /* 将date输入框渲染为普通文本框样式，同时禁用默认日历触发 */
  input[type="date"] {
    -moz-appearance: textfield;
  }
  

  这样设置后，输入框看起来和普通文本框一样，但仍然是date类型，提交表单时会保持date类型的校验逻辑，点击输入框也不会弹出日历弹窗。

• 备选方案：用容器覆盖+事件转发（适合特殊场景）
  如果上面的CSS方案在某些旧版Firefox中不生效，可以试试用容器包裹输入框，通过pointer-events阻止输入框的点击触发，再通过容器转发事件让输入框获得焦点：

  <div class="date-wrapper">
    <input type="date" id="myDate">
  </div>
  

  .date-wrapper {
    position: relative;
    display: inline-block;
  }
  .date-wrapper input[type="date"] {
    pointer-events: none;
  }
  

  document.querySelector('.date-wrapper').addEventListener('click', () => {
    document.getElementById('myDate').focus();
  });
  

  这种方式下，点击容器时输入框会获得焦点，但因为输入框的pointer-events被禁用，不会触发日历弹窗，同时用户仍然可以手动输入日期，保留date类型的校验功能。

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