RTL方向下Chrome等浏览器日期输入框日历图标位置异常问题

问题分析 #

在希伯来语（RTL）网站中，<input type="date">的日历图标在Firefox中能正常显示在左侧，但Chrome等WebKit内核浏览器中位置异常。你当前的JS代码完全无效——因为::-webkit-calendar-picker-indicator是浏览器生成的伪元素，不属于DOM节点，无法通过querySelector获取；CSS样式则需要补充更完整的规则才能生效。

修正方案 #

1. 删除无效JavaScript代码 #

直接移除你写的DOM监听逻辑，这段代码对调整图标位置没有任何作用。

2. 优化CSS样式 #

补充完整的样式规则，确保WebKit内核浏览器图标定位正确，同时避免输入文字与图标重叠：

/* RTL环境下给date输入框预留图标空间 */
html[dir="rtl"] .form-control[type="date"] {
  padding-left: 2.5rem;
  padding-right: 0.75rem;
  position: relative;
}

/* WebKit内核浏览器日历图标定位 */
html[dir="rtl"] .form-control[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.5rem;
  cursor: pointer;
}

/* 兼容Firefox默认RTL样式 */
@-moz-document url-prefix() {
  html[dir="rtl"] .form-control[type="date"] {
    padding-left: 0.75rem;
    padding-right: 2.5rem;
  }
}

3. 保留原始HTML结构 #

你的HTML代码无需修改：

<input type="date" class="form-control" name="adjDate" id="adjDate">

原理说明 #

• WebKit内核浏览器默认将日历图标放在输入框右侧，RTL环境下需通过绝对定位强制移到左侧
• 给输入框设置对应方向的padding，避免日期文字与图标重叠
• Firefox原生适配RTL环境的date输入框，只需确保不覆盖它的默认样式即可

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