如何修改type="month"的input占位符？支付表单到期年月设置问题

你遇到的核心问题是：HTML原生的input type="month"不支持placeholder属性，所有主流浏览器对这个类型的输入框都有固定的渲染逻辑，会忽略placeholder的设置，所以你怎么加都不会显示。

下面给你几个实用的解决办法：

方案1：优化现有label模拟占位符 #

你已经用了label来显示提示文字，只需补充CSS让它看起来像原生占位符，并且在用户选择日期后自动调整样式：

调整后的HTML：

<div class="custom-month-input">
    <input type="month" id="expiry-date" name="expiry-date" class="expiry-input">
    <label for="expiry-date" class="month-placeholder">Expiry(MM/YY)</label>
</div>

对应的CSS：

.custom-month-input {
  position: relative;
  display: inline-block;
}

.expiry-input {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 16px;
}

.month-placeholder {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none; /* 点击穿透到输入框 */
  transition: all 0.2s ease;
}

/* 输入框选中日期或聚焦时，缩小提示文字到上方 */
.expiry-input:valid ~ .month-placeholder,
.expiry-input:focus ~ .month-placeholder {
  top: 0;
  font-size: 12px;
  color: #666;
}

方案2：拆分成月份+年份独立输入框（更灵活可控） #

如果不想受原生日期选择器的限制，直接拆成两个输入框，完全自定义占位符和格式：

<div class="expiry-group">
  <input type="number" id="expiry-month" name="expiry-month" placeholder="MM" min="1" max="12" maxlength="2" style="width: 60px; padding: 8px;">
  <span style="margin: 0 4px;">/</span>
  <input type="number" id="expiry-year" name="expiry-year" placeholder="YY" min="24" max="99" maxlength="2" style="width: 60px; padding: 8px;">
</div>

这种方式还能配合JS做更精细的校验，比如限制年份范围、确保月份是1-12之间的数字。

方案3：用CSS伪元素模拟占位符（仅现代浏览器） #

如果一定要保留type="month"的原生选择器，可通过CSS伪元素添加占位符，当输入框有值时自动隐藏：

<div class="custom-month-input">
  <input type="month" id="expiry-date" name="expiry-date" class="expiry-input">
</div>

.custom-month-input {
  position: relative;
  display: inline-block;
}

.expiry-input {
  padding: 8px 10px;
  font-size: 16px;
}

/* 用伪元素生成占位符 */
.custom-month-input::before {
  content: "MM/YY";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

/* 输入框有有效值时隐藏占位符 */
.custom-month-input:has(.expiry-input:valid)::before {
  display: none;
}

注意:has()选择器需要Chrome 105+、Firefox 121+等现代浏览器支持，旧浏览器需要用JS切换类名来实现。

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