text-align: right; only for placeholder?

how can active text-align: right; only for 开发者_JS百科placeholder?

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

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

Or try it with a :focus event:

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.

It's better to set CSS style for placeholder as @Hnatt mentioned. I used it with setting direction and the complete list of the selector for known browsers as below:

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

As of year 2020, CSS selector ::placeholder is supported in all major browsers except Internet Explorer:

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

Edge requires vendor prefix:

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

Sources: Can I use, MDN

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

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

direction: rtl; text-align: left;

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

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

HTH.

using inline-jquery

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

Demo

::placeholder pseudo-element is still a working draft and it has a very limited number of supported CSS properties.

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

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

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-spacing property by prefixing a character and then hide it.

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.

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

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 style="direction: rtl;">
<input type="text" name="airline_search" style="text-align: right;  border: none;" placeholder="ارلاین">
</div>

should work.

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

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

input placeholder align :

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

input text align :

<input style="text-align: left;" />