Geek asks and answers

CSS text indent in the input field does not update the caret position until you start typing

When I use the text-ident property in CSS, what I expect to see is when you focus on the text input area, the cursor icon / caret will look indented. But it looks like it has no padding until you type the first character. The only work around is to use left-handed registration on the input element, but I want to avoid padding, because I also set the width and don’t want the fix for IE to be implemented using a special IE spreadsheet.

This error occurs in Safari.

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




If there is no focus, the identifier text does not affect the position of the carriage:

On focus


When you start typing, it backs off correctly:

When you start typing


, , , ( ).

After deleting what you've typed

HTML:

<input type="text" />

CSS

input   { text-indent: 10px; }
+5
2

WebKit, https://bugs.webkit.org/show_bug.cgi?id=82688

Safari .

padding-left.

+3
<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>

, , , webkit/safari. .

0

More articles:


All Articles