html - CSS:带有 ltr 插入的 rtl 输入元素

Question

我在整个文档的 html 标签中使用了 rtl 方向(波斯语)。但是我有一些用户名或电子邮件地址的输入元素(如您所知，这些是英文的，必须是 ltr)。我用谷歌搜索并找到了一些用于自动定向的脚本。他们工作了，但如果我有 rtl placeholder 用于输入，占位符文本也将是 ltr!
你能指导我吗？
我想要这样的东西:
[示例]:http://sumdroid.pe.hu/sample.jpg “请看这张图片”

整个文档是rtl，占位符是rtl，但输入元素插入是ltr。

Answer 1

使用浏览器特定的占位符伪调用应该可以解决您的问题

input[type="text"]:-moz-placeholder {
    text-align: right;
}
input[type="text"]:-ms-input-placeholder {
    text-align: right;
}
input[type="text"]::-webkit-input-placeholder {
    text-align: right;
}

.input{
direction: rtl;
}

.input:focus{
  text-align: left;
  direction: ltr;
}