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:
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; }
Answer
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.