When I apply the text-indent property in CSS, my expectation is that when the focus is on the text input area, the text cursor icon/caret will appear indented. However, it seems like the indentation does not take effect until you type the first character. To get around this issue, I have to use left padding on the input element. Unfortunately, I would prefer not to use padding because I have set a specific width and do not want to deal with implementing an IE-specific hack using a separate stylesheet.
This problem specifically occurs in Safari.
Below are images illustrating the issue:
When there is no text and the focus is on the input field, the text-indent does not affect the caret position:
However, once you begin typing, the indent works as intended:
After typing and then deleting the text, it finally displays the desired behavior from the beginning (indenting the caret).
Here is the HTML code snippet:
<input type="text" />
And here is the corresponding CSS:
input { text-indent: 10px; }