text-align：right; 只为占位符？
怎样才能激活text-align: right; 只为占位符？
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">
我想要使用direction: ltr; 对于文本（input为inpute）和text-align: right; 占位符。
/* webkit solution */ ::-webkit-input-placeholder { text-align:right; } /* mozilla solution */ input:-moz-placeholder { text-align:right; }
或者尝试一下:focus事件：
input[type='text']{ text-align:right; } input[type='text']:focus{ text-align:left; }
这样，任何硬编码的占位符都将保持正确，任何你所关注的文本都是正确的。 另一方面，当你失去焦点的时候，对抗就会变得正确。
最好为@Hnatt提到的为占位符设置CSS样式。 我通过设置方向来使用它，并且已知浏览器的select器的完整列表是
::-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; }
希望这个帮助。 如果是这样，请标记为答案。
使用内联-jquery
onkeyup="if($(this).val()==''){ $(this).css({'text-align':'right'})} else{ $(this).css({'text-align':'left'})}"
演示
Villi Katrih的职位是对的，但错过了方向。 你应该使用：
方向：rtl; text-align：left;
“方向”影响占位符文本的位置，而“文本alignment”影响到input的内容。
<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">
HTH。
input::-webkit-input-placeholder { direction: rtl; text-align: left; }
::placeholder伪元素仍然是一个工作草案，它的支持的CSS属性数量非常有限。
所有适用于:: first-line伪元素的属性也适用于:: placeholder伪元素。
没有额外的属性说明，但人们已经指出，人们希望支持text-align 。
因此，从支持的属性（在这里find）的相当小的列表，唯一正确的方法，你可以实现这一点，如果你的占位符文本只有一个字长。 这将允许您通过为字符加前缀来利用支持的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 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>
应该pipe用。
你可以使用这个代码。 由此您可以使用真实方向的自动input，并享受使用正确的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">
