Html 文本对齐：右；仅用于占位符？

text-align: right; only for placeholder?

提问by Me hdi

how can active text-align: right;only for placeholder?

怎么能text-align: right;只为占位符激活？

<input type="text" name="airline_search" style="direction: ltr;  border: none;" placeholder="??????">

i want use of direction: ltr;for text(that typed to inpute), and text-align: right;for placeholder.

我想使用direction: ltr;for 文本（输入到 inpute）和text-align: right;占位符。

回答by Hnatt

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

回答by monsieur_h

Or try it with a :focusevent:

或者用一个:focus事件试试：

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

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

This way, any placeholder even hard-coded will be held on right, and any text you type when focused will be on right. On the other hand, when you lose the focus, the alignement becomes right again.

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

回答by QMaster

It's better to set CSS style for placeholder as @Hnatt mentioned. I use it by setting direction and a complete list of selector for known browsers is

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

Hope this help. Please mark as answer if this is.

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

回答by Thinking80s

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

回答by h0mayun

using inline-jquery

使用内联jquery

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

Demo

演示

回答by TarranJones

::placeholderpseudo-elementis still a working draft and it has a very limited number of supported CSS properties.

::placeholder伪元素仍然是一个工作草案，它支持的 CSS 属性数量非常有限。

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

适用于 ::first-line 伪元素的所有属性也适用于 ::placeholder 伪元素。

No additional Properties are stated, but it has been noted people would like text-alignto be supported.

没有说明其他属性，但已经指出人们希望text-align得到支持。

So from the fairly small list of supported properties (found here), the only correct way you could achieve this would be if your placeholder text was only one word long. This would allow you to take advantage of the supported word-spacingproperty by prefixing a character and then hide it.

因此，从支持的属性的相当小的列表（在此处找到）中，您可以实现这一目标的唯一正确方法是您的占位符文本只有一个字长。这将允许您word-spacing通过为字符添加前缀然后隐藏它来利用受支持的属性。

This probably doesn't work because it doesn't use browser prefixes.

这可能不起作用，因为它不使用浏览器前缀。

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

This should work

这应该工作

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

But as browsers support thing they shouldn't and don't support thing they should you could just try this.

但是由于浏览器支持他们不应该支持的事情，并且不支持他们应该做的事情，你可以试试这个。

This isnt supposed to work .

这不应该工作。

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;manages the cursor position and the flow of text, as a placeholder doesn't have a cursor or editable text it wont do anything.

FYIdirection: ltr;管理光标位置和文本流，因为占位符没有光标或可编辑文本，它不会做任何事情。

回答by Milton

The post of Villi Katrih is right, but miss in the direction. You should use:

Villi Katrih 的帖子是对的，但方向错了。你应该使用：

direction: rtl; text-align: left;

方向：rtl；文本对齐：左；

'direction' affects the placeholder text placement, while 'text-align' affects to the content of the input.

'direction' 影响占位符文本的放置，而 'text-align' 影响输入的内容。

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

HTH.

哈。

回答by Villi Katrih

did you try add it in the style?

您是否尝试将其添加到样式中？

<input type="text" name="airline_search" style="direction: ltr; text-align: right;  border: none;" placeholder="??????">

or just set an outside div like this:

或者像这样设置一个外部 div：

<div style="direction: rtl;">
<input type="text" name="airline_search" style="text-align: right;  border: none;" placeholder="??????">
</div>

should work.

应该管用。

回答by Hossein Ghaem

You can use this code. By this You can use of input in real direction auto and enjoy of using correct rtl placeholder.

您可以使用此代码。通过这种方式，您可以在实际方向自动使用输入并享受使用正确的 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">