CSS text-indent on input field doesn't update the caret position until you start typing

问题

When I use text-ident property in CSS, what I expect to see is when you focus into the text input area, the text cursor icon/caret will appear indented. But it appears as if it isn't indented until you type for first character. The only work around is to use left padding on the input element, but I want to avoid using padding because I am also setting a width and don't want to have to implement a padding fix for IE using an IE specific spreadsheet.

This bug happens in Safari.

See below for images of what I'm talking about.

On focus when there is no text, the text-ident doesn't affect the caret position:

On focus

When you start typing, it indents correctly:

When you start typing

After you type and then delete what you've typed, it displays what I want it to do from the beginning (indent the caret).

After deleting what you've typed

HTML:

<input type="text" />

CSS:

input   { text-indent: 10px; }

回答1:

It's a confirmed WebKit bug that has recently been resolved https://bugs.webkit.org/show_bug.cgi?id=82688

Your version of Safari may be too old for this fix to be included.

Use padding-left instead.

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

This allows the text indent to focus indented, which I believe has been fixed in newer versions of webkit / safari. However, this fix should help you out with the older versions.

Thanks

来源：https://stackoverflow.com/questions/12046638/css-text-indent-on-input-field-doesnt-update-the-caret-position-until-you-start

标签

html

css

html-input

text-indent