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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

Лучше установить стиль 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;
}

Надеюсь на эту помощь. Пожалуйста, отметьте как ответ, если это так.

Ответ 4

с помощью inline-jquery

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

Демо

Ответ 5

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

направление: rtl; text-align: left;

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

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

НТН.

Ответ 6

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

Ответ 7

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

Все свойства, применимые к псевдоэлементу:: first-line, также применяются к псевдоэлементу:: 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="- ارلاین">

Ответ 8

Вы попробовали добавить его в стиле?

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

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

Ответ 9

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