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

Posted 2023-03-05

【中文标题】文本对齐：右；仅用于占位符？

【英文标题】：text-align: right; only for placeholder?

【发布时间】：2011-10-07 11:22:57

【问题描述】：

怎么才能激活text-align: right; 仅用于占位符？

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

我想将direction: ltr; 用于文本（输入到输入），text-align: right; 用于占位符。

【参考方案1】：

截至 2020 年，CS​​S 选择器 ::placeholder 在除 Internet Explorer 之外的所有主要浏览器中均受支持：

input::placeholder 
    text-align: right;

Edge 需要供应商前缀：

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

来源：Can I use、MDN

【讨论】：

这应该是最重要的！更新

【参考方案2】：

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

【参考方案3】：

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

 

希望对您有所帮助。

【参考方案4】：

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

【参考方案5】：

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

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

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

因此，从相当小的受支持属性列表(found here) 来看，实现此目的的唯一正确方法是，如果您的占位符文本只有一个字长。 这将允许您通过为字符添加前缀然后隐藏它来利用受支持的 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="ارلاین">

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

【参考方案6】：

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

【参考方案7】：

使用内联-jquery

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

Demo

【参考方案8】：

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

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

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

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

HTH。

【参考方案9】：

或通过:focus 事件尝试：

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


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

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

【讨论】：

这是个好方法。但它也会在焦点改变后将您的文本浮动回中心。

【参考方案10】：

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

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

应该可以。

【讨论】：

我想使用'direction: ltr;'用于文本和“文本对齐：右；”占位符。

【参考方案11】：

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

【讨论】：

对于chrome和opera，是什么？

AFAIK，不支持。试试这个 Jquery 修复：hagenburger.net/BLOG/…

我不断收到关于此答案的新投票通知。这个怪癖在 2017 年仍然有意义吗？

在 2019 年仍然获得支持，因为它是一个很好的答案。 @elipoultorak 的评论也是如此，因为这是正确的答案。 ❤

它现在似乎在 chrome input::placeholder text-align: right

中工作