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; }

Microfarad

How about posting come code or a jsFiddle? – Hothouse

Added code to replicate the bug. – Microfarad

Works fine in Chrome & FF: jsfiddle.net/j08691/VyNP2 – Hothouse

But don't work fine in Safari. – Ciceronian

What safari are you using? It works fine in Safari 5. The cursor is not displayed until focusing on it, but it's most certainly indented. – Hillell

Safari Version 5.1.7 (7534.57.2) – Microfarad

You might wanna use box-sizing property along with padding-left and width. – Atomic

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

Atomic

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>

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

Flatboat