如何解决Safari中日期时间输入框标签与默认占位符重叠问题？

我正在创建一个包含日期和时间输入字段的表单，设置了点击字段时占位文本上移的交互效果。该表单在Chrome中显示正常，但在Safari浏览器中出现了表单字段重叠的问题，请问该如何修复？

效果对比 #

Safari下的重叠效果 #

Chrome下的正常效果 #

原始代码 #

HTML代码 #

<div class="form-field col-sm-6">
  <input id="date" name="birthdate" class="input-text js-input" type="date" placeholder="" required />
  <label class="label" for="birthdate">Date of Birth</label>
</div>
<div class="form-field col-sm-6">
  <input id="birthtime" name="birthtime" class="input-text js-input" type="time" placeholder="" required />
  <label class="label" for="birthtime">Time of Birth</label>
</div>

CSS代码 #

.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}
.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #b1afaf;
  cursor: text;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

修复方案 #

问题根源在于Safari对date/time类型输入框的默认样式处理与Chrome存在差异，加上label的绝对定位缺少正确的父容器基准，导致重叠。按以下步骤修复：

1. 给父容器设置相对定位
   为.form-field添加position: relative，确保label的绝对定位是相对于输入框所在的容器，而非全局文档：

   .contact-form .form-field {
     position: relative;
   }
   

2. 统一输入框的高度与内边距
   覆盖浏览器默认样式，让输入框在不同浏览器中高度一致，避免label位置偏移：

   .contact-form .input-text {
     box-sizing: border-box;
     width: 100%;
     height: 48px; /* 自定义高度，适配label位置 */
     padding: 12px 20px;
     border: 1px solid #ddd; /* 可选，统一边框样式 */
     font-size: 18px;
   }
   

3. 调整label的定位与层级
   修正label的初始位置，确保在未激活时与输入框内容不重叠，同时设置层级避免遮挡输入框：

   .contact-form .label {
     position: absolute;
     left: 20px;
     bottom: 10px; /* 根据输入框高度调整 */
     font-size: 18px;
     line-height: 26px;
     font-weight: 400;
     color: #b1afaf;
     cursor: text;
     transition: transform 0.2s ease-in-out;
     z-index: 0; /* 确保输入框在上方 */
   }
   .contact-form .input-text {
     z-index: 1;
     position: relative; /* 配合z-index生效 */
   }
   

4. 适配Safari的输入框样式
   移除Safari对日期/时间输入框的默认控件样式干扰（若仍有问题则添加）：

   .contact-form .input-text[type="date"],
   .contact-form .input-text[type="time"] {
     -webkit-appearance: none;
     appearance: none;
   }
   

5. 微调label上移距离
   根据输入框的实际高度，调整激活状态下label的上移距离，确保在Safari中完全避开输入框：

   .contact-form .input-text:focus + .label,
   .contact-form .input-text.not-empty + .label {
     -webkit-transform: translateY(-40px);
     transform: translateY(-40px); /* 比原数值大，适配更高的输入框 */
   }
   

修改后的完整CSS示例 #

.contact-form .form-field {
  position: relative;
  margin-bottom: 24px; /* 可选，增加字段间距 */
}

.contact-form .input-text {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px 20px;
  border: 1px solid #ddd;
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.contact-form .input-text:focus {
  outline: none;
  border-color: #666; /* 可选，聚焦时高亮边框 */
}

.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}

.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #b1afaf;
  cursor: text;
  transition: transform 0.2s ease-in-out;
  z-index: 0;
}

/* 适配Safari日期/时间输入框 */
.contact-form .input-text[type="date"],
.contact-form .input-text[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}

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