输入字段上的CSS text-indent在您开始输入之前不会更新插入位置

Question

当我在CSS中使用text-ident属性时，我期望看到的是当您将焦点放在文本输入区域时，文本光标图标/插入符将显示为缩进。但看起来好像它没有缩进，直到你键入第一个字符。唯一的解决方法是在输入元素上使用左边距，但我想避免使用填充，因为我也设置了宽度，并且不希望使用IE特定的电子表格为IE实现填充修复。

此错误发生在Safari中。

见下面我正在谈论的图像。

在没有文本时进行焦点，text-ident不会影响插入位置：

当您开始输入时，它会正确缩进：

键入然后删除您键入的内容后，它会从头开始显示我想要它执行的操作（缩进插入符号）。

HTML：

<input type="text" />

CSS：

input   { text-indent: 10px; }

Answer 1

这是最近已经解决的已确认的WebKit错误https://bugs.webkit.org/show_bug.cgi?id=82688

您的Safari版本可能太旧，无法包含此修复程序。

改为使用padding-left。

Answer 2

<style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>

这允许文本缩进聚焦缩进，我相信已经在较新版本的webkit / safari中修复了。但是，此修复程序可以帮助您使用旧版本。

由于