CSS：使用ltr插入的rtl输入元素

我在整个文档的html标记中使用了rtl方向（用于波斯语言）。但我有一些输入元素用于用户名或电子邮件地址（如您所知，这些是英语，必须是ltr）。我谷歌，并找到一些自动方向的脚本。他们工作，但如果我有rtl占位符输入，占位符文本也将ltr！
你能指导我吗？
我想是这样的：
[示例]：http://sumdroid.pe.hu/sample.jpg“请参阅本形象”CSS：使用ltr插入的rtl输入元素

整个文档是RTL，占位符是RTL，但输入元素插入的LTR。

来源

2016-01-20 Parsa

使用浏览器的特定伪调用占位符应梳理你的问题出

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; 
}

来源

2016-01-20 08:50:17 Stewartside

我想他希望这些对齐 - 但很好的解决方案。 – Aravona

谢谢。但只是CSS伪代码是有效的，解决问题。其余的样式在不需要的时候用这些代码，结果会不一样，而不是我想要的东西（如附图所示） – Parsa

您可以用这种方式：

HTML

<input class="input" type="text" value="رمزعبور" name="" id="" onfocus="if (this.value == 'رمزعبور') {this.value = '';}" onblur="if (this.value == '') {this.value = 'رمزعبور';}"/>

CSS

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

演示：http://codepen.io/mehrabi/pen/yePmEZ

来源

2016-01-20 08:53:42 coderman

谢谢。这是一个棘手的解决方案。但我的意思是使用占位符，而不是使用值作为占位符。 – Parsa

CSS：使用ltr插入的rtl输入元素

回答

相关问题