怎么才能激活text-align: right; 仅用于占位符？
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">
我想将direction: ltr; 用于文本（输入到输入），text-align: right; 用于占位符。
【问题讨论】：
标签： html css placeholder
<style>
::placeholder {/* Firefox */
text-align: right;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
text-align: right;}
::-ms-input-placeholder { /* Microsoft Edge */
text-align: right;} </style>
<input type="text" placeholder="تست">
【讨论】：
最好像@Hnatt 提到的那样为占位符设置 CSS 样式。我将它与设置方向和已知浏览器的选择器的完整列表一起使用，如下所示：
::-webKit-input-placeholder { /* WebKit browsers */
direction: rtl;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
direction: rtl;
}
::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
direction: rtl;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
direction: rtl;
}
希望对您有所帮助。
【讨论】：
您可以使用此代码。 这样您就可以在实际方向自动使用输入，并享受使用正确的 rtl 占位符。
//jQuery
(function($) {
$.fn.dir_auto = function() {
var selector = '.inputs-nyn[dir="auto"]';
var sclass = "auto-nyn05";
var ftime = true;
if ( $(selector).length ) {
$(document).on("keyup", selector , function() {
if( ftime || !$(this).val() ){
if( !$(this).val() ){
$(this).addClass(sclass);
ftime = true;
}
else{
$(this).removeClass(sclass);
ftime = false;
}
}
});
}
};
})(jQuery);
$(document).ready(function() {
$.fn.dir_auto();
});//css
body{
direction: rtl;
}
.inputs-nyn.auto-nyn05[dir="auto"] {
direction: rtl;
}
.inputs-nyn[dir="auto"]::placeholder {
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML -->
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="ارلاین" type="text">【讨论】：
::placeholder pseudo-element 仍然是一个工作草案，它支持的 CSS 属性数量非常有限。
适用于 ::first-line 伪元素的所有属性也适用于 ::placeholder 伪元素。
没有说明其他属性，但已经注意到人们希望支持text-align。
因此，从相当小的受支持属性列表(found here) 来看，实现此目的的唯一正确方法是，如果您的占位符文本只有一个字长。
这将允许您通过为字符添加前缀然后隐藏它来利用受支持的 word-spacing 属性。
这可能不起作用，因为它不使用浏览器前缀。
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder:first-letter {
color: #fff!important;
}<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">这应该可以工作
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder::first-letter {
color: #fff!important;
}
/* browser support */
input::-webkit-input-placeholder {
word-spacing: 155px;
}
input:-moz-placeholder {
word-spacing: 155px;
}
input::-moz-placeholder {
word-spacing: 155px;
}
input:-ms-input-placeholder {
word-spacing: 155px;
}
input::-webkit-input-placeholder::first-letter {
color: #fff!important;
}
input:-moz-placeholder:first-letter {
color: #fff!important;
}
input::-moz-placeholder::first-letter {
color: #fff!important;
}
input:-ms-input-placeholder::first-letter {
color: #fff!important;
}<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">但是由于浏览器支持他们不应该支持的东西，也不支持他们应该支持的东西，你可以试试这个。
这不应该工作。
input::-webkit-input-placeholder {
/* WebKit browsers */
text-align: right;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
text-align: right;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ but I'm not sure about working */
text-align: right;
}
input:-ms-input-placeholder {
/* Internet Explorer 10 */
text-align: right;
}
input::placeholder {
text-align: right;
}<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">仅供参考direction: ltr; 管理光标位置和文本流，因为占位符没有光标或可编辑文本，它不会做任何事情。
【讨论】：
input::-webkit-input-placeholder {
direction: rtl;
text-align: left;
}
【讨论】：
使用内联-jquery
onkeyup="if($(this).val()==''){ $(this).css({'text-align':'right'})} else{ $(this).css({'text-align':'left'})}"
【讨论】：
Villi Katrih 的帖子是对的，但方向错了。你应该使用：
方向：rtl; 文本对齐：左；
'direction' 影响占位符文本的位置，而 'text-align' 影响输入的内容。
<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">
HTH。
【讨论】：
或通过:focus 事件尝试：
input[type='text']{
text-align:right;
}
input[type='text']:focus{
text-align:left;
}
这样，即使是硬编码的任何占位符都将保持在右侧，并且您在聚焦时键入的任何文本都将在右侧。 另一方面，当您失去焦点时，对齐会再次正确。
【讨论】：
您是否尝试将其添加到样式中？
<input type="text" name="airline_search" style="direction: ltr; text-align: right; border: none;" placeholder="ارلاین">
或者像这样设置一个外部 div：
<div style="direction: rtl;">
<input type="text" name="airline_search" style="text-align: right; border: none;" placeholder="ارلاین">
</div>
应该可以。
【讨论】：
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
【讨论】：