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

Question

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:

When you start typing, it indents correctly:

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

HTML:

<input type="text" />

CSS:

input   { text-indent: 10px; }

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

Solution 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