如何设置input type="datetime-local"输入框为RTL显示方向

架构老林

2026-9-2

问题原因

input[type="datetime-local"]属于浏览器原生渲染的替换元素，它内部的日期分段、时间选择器、右侧操作图标都是浏览器内核内置生成的，普通的direction: rtlCSS规则、dir="rtl"属性只能作用在元素外层，无法穿透修改内部原生组件的排列逻辑，直接添加这两个属性不会生效。

涉及的基础代码如下：

<input type="datetime-local">

默认LTR渲染效果：
datetime-local默认LTR显示效果

可行解决方法

方法1：搭配双向文本重排属性实现RTL（最简单，适配现代浏览器）
绝大多数人改这个控件RTL不生效，都是只加了direction: rtl漏了配套属性。需要额外加unicode-bidi: bidi-override强制浏览器重排控件内部的元素顺序，代码如下：
```
input[type="datetime-local"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}
```
这段代码在Chrome、Edge、Firefox 110+版本中都能正常生效：输入框内的日期时间顺序会转为RTL排列，原本在右侧的日历选择图标会自动移到输入框左侧。

方法2：重置原生样式自定义布局（全版本兼容）
如果需要适配低版本浏览器，或者需要更精细的样式控制，可以先清除原生控件的默认外观，再手动调整布局：

input[type="datetime-local"] {
  direction: rtl;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 自定义内边距，为左侧图标预留位置 */
  padding: 8px 12px 8px 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 自定义日历图标定位到输入框左侧 */
  background: #fff url('日历图标地址') no-repeat left 10px center;
  background-size: 20px;
}