CSS有没有办法在光标和输入中的占位符文本之间添加空格？答案

【问题标题】：Is there a way with CSS to add space between the cursor, and the placeholder text in an input?CSS有没有办法在光标和输入中的占位符文本之间添加空格？
【发布时间】：2015-08-20 21:45:02
【问题描述】：

我的问题与在早期版本的 Firefox for OSX (37.0.2) 上发现的错误有关，我在此处截屏：http://i.imgur.com/s6AfHuP.png

有没有办法用 css 将占位符的第一个字符从光标最初所在的位置移开？

该页面是一个 Angular 应用程序，我听说它有时不能很好地与 Firefox 配合使用。

我尝试将 text-indent 和 padding-left 添加到 moz-placeholder，但这会使光标与占位符文本一起移动。

在所有版本的 Firefox 中，我还构建了一些 JS 来为占位符文本添加空格，但我希望避免这样做。

【问题讨论】：

我知道这不是很好的解决方案，但你为什么不在输入中尝试 placeholder="Placeholer"？
这是我试图避免的，因为该问题不会出现在其他浏览器中，但感谢您的想法！
使用 css-tricks.com/snippets/css/style-placeholder-text 应用 padding-left。我也喜欢申请:focus ::-moz-placeholder{color: transparent;}
:first-letter 选择器是否适用于占位符文本？我没试过。只是一个想法。文档链接：http://www.w3.org/TR/CSS21/selector.html#first-formatted-line

标签： javascript jquery html css angularjs

【解决方案1】：

我建议要么生成所有带有前导空格的占位符，如前所述，要么直接使用::-moz-placeholder { font-style: italic; }。

【讨论】：

【解决方案2】：

是的，您可以在 CSS 中使用不会折叠空格的 white-space: pre; 属性在占位符文本中显示前导空格。

例如：如果您正在使用 Angular 多选下拉菜单，则应使用下面显示的类似代码在占位符文本中呈现前导空格.

<ng-select style="white-space: pre" placeholder="  Example of a placeholder with leading spaces!" [multiple]="xxxx" [formControl]="xxxx">                                                    
     <ng-option *ngFor="let x of y" [value]="x?.value">{{x?.text}}</ng-option>                                                
</ng-select>

【讨论】：