text-align: right; only for placeholder?

问题

how can active text-align: right; only for 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.

回答1:

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

回答2:

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.

回答3:

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

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

回答4:

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

回答5:

using inline-jquery

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

Demo

回答6:

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.

回答7:

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

回答8:

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.

回答9:

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

来源：https://stackoverflow.com/questions/6729837/text-align-right-only-for-placeholder

标签

html

css

placeholder