Question

如何仅为占位符激活text-align: right;？

<input type="text" name="airline_search" style="direction: ltr;  border: none;" placeholder="ارلاین">

我希望direction: ltr;用于文本（输入为inpute），text-align: right;用于占位符。

Answer 1

/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }

Answer 2

或者使用:focus事件尝试：

input[type='text']{
text-align:right;
}

input[type='text']:focus{
text-align:left;
}

这样，即使是硬编码的任何占位符都会保留在右侧，而您在聚焦时键入的任何文本都将在右侧。另一方面，当你失去焦点时，对象再次变得正确。

Answer 3

最好为@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;
}

希望这有帮助。如果是这样，请标记为答案。

Answer 4

input::-webkit-input-placeholder {
    direction: rtl;
    text-align: left;
}

Answer 5

使用inline-jquery

onkeyup="if($(this).val()==''){ $(this).css({'text-align':'right'})} else{ $(this).css({'text-align':'left'})}"

Demo

Answer 6

截至2020年，除Internet Explorer之外，所有主流浏览器均支持CSS选择器::placeholder：

input::placeholder {
    text-align: right;
}

Edge需要供应商前缀：

input::-webkit-input-placeholder {
    text-align: center;
}

来源：Can I use，MDN

Answer 7

Villi Katrih的职位是正确的，但却错过了方向。你应该使用：

方向：rtl; text-align：left;

'direction'会影响占位符文字展示位置，而'text-align'会影响输入内容。

<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">

HTH。

Answer 8

::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="ارلاین">

FYI direction: ltr;管理光标位置和文本流，因为占位符没有光标或可编辑的文本，它不会执行任何操作。

Answer 9

你尝试在风格中添加它吗？

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

应该有用。

Answer 10

您可以使用此代码。通过这个您可以使用真实方向自动输入并享受使用正确的rtl占位符。

＆＃13;

//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();

});

＆＃13;

//css

body{
    direction: rtl;
}

.inputs-nyn.auto-nyn05[dir="auto"] {
    
    direction: rtl;
}

.inputs-nyn[dir="auto"]::placeholder {
    text-align: right;
}

＆＃13;

<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">

＆＃13;

Answer 11

<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="تست">

text-align：right;仅限占位符？

11 个答案: