CSS是否有办法在光标和输入中的占位符文本之间添加空格?

Is there a way with CSS to add space between the cursor, and the placeholder text in an input?

本文关键字:文本 占位符 之间 添加 空格 输入 是否 光标 CSS      更新时间:2023-09-26

我的问题与Firefox for OSX(37.0.2)的早期版本中发现的一个错误有关,我在这里有一个截图:https://i.stack.imgur.com/dzK0G.png

是否有任何方法与css移动占位符的第一个字符远离光标最初的位置?

这个页面是一个Angular应用,我听说它有时不能很好地与Firefox兼容。

我曾尝试在moz-placeholder中添加文本缩进和左填充,但这会使光标随着占位符文本移动。

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

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

是的,你可以在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>