выравнивание текста: справа;только для заполнителя?

Question

Как активен text-align: right; только для заполнителя?

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

я хочу использовать direction: ltr; для текста (который вводится для ввода) и text-align: right; для заполнителя.

Answer 1

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

Answer 2

Лучше установить стиль CSS для заполнителя, как упомянуто @Hnatt. Я использую его, задав направление и полный список селекторов для известных браузеров:

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

Или попробуйте с событием :focus:

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

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

Таким образом, любой местозаполнитель, даже жестко запрограммированный, будет удерживаться справа, а любой текст, который вы вводите, когда он сфокусирован, будет справа. С другой стороны, когда вы теряете фокус, выравнивание снова становится правильным.

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'})}"

Демо

Answer 6

::placeholder псевдоэлемент все еще является рабочим проектом и имеет очень ограниченное число поддерживаемых свойств CSS.

Все свойства, которые применяются к :: first-линейный псевдоэлемент также применяется к псевдоэлементу :: placeholder.

Дополнительные свойства не указаны, но было отмечено, что люди хотели бы, чтобы text-align поддерживался.

Таким образом, из довольно небольшого списка поддерживаемых свойств (найденного здесь) , единственный правильный способ, которым вы могли бы достичь этого, был бы, если бы ваш текст-заполнитель был длиной всего одно слово.Это позволит вам воспользоваться поддерживаемым свойством 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 7

Пост Вилли Катриха прав, но мисс в направлении. Вы должны использовать:

Направление: RTL; выравнивание текста: слева;

'direction' влияет на размещение текста заполнителя, в то время как 'text-align' влияет на содержимое ввода.

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

НТН.

Answer 8

Вы можете использовать этот код. Таким образом, вы можете использовать ввод в реальном направлении автоматически и наслаждаться использованием правильного местозаполнителя 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">

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>

должно работать.