Текстовый отступ CSS в поле ввода не обновляет положение курсора, пока вы не начнете печатать

Когда я использую свойство text-ident в CSS, я ожидаю увидеть, что когда вы фокусируетесь на области ввода текста, значок текстового курсора/курсор будет отображаться с отступом. Но кажется, что он не имеет отступа, пока вы не наберете первый символ. Единственным обходным решением является использование левого заполнения для элемента ввода, но я хочу избежать использования заполнения, потому что я также устанавливаю ширину и не хочу реализовывать исправление заполнения для IE с использованием электронной таблицы, специфичной для IE.

Эта ошибка возникает в Safari.

Ниже приведены изображения того, о чем я говорю.




В фокусе, когда текста нет, text-ident не влияет на положение каретки:

В фокусе


Когда вы начинаете печатать, отступы делаются правильно:

Когда вы начинаете печатать


После того, как вы наберете, а затем удалите то, что вы набрал, он отображает то, что я хочу сделать с самого начала (отступ каретки).

После удаления введенного вами текста

HTML:

<input type="text" />

CSS:

input   { text-indent: 10px; }

html css html-input text-indent
person user1418227    schedule 20.08.2012    source источник
comment
Как насчет публикации кода или jsFiddle?   -  person j08691    schedule 21.08.2012
comment
Добавлен код для воспроизведения ошибки.   -  person user1418227    schedule 21.08.2012
comment
Отлично работает в Chrome и FF: jsfiddle.net/j08691/VyNP2   -  person j08691    schedule 21.08.2012
comment
Но не работает нормально в Safari.   -  person Miljan Puzović    schedule 21.08.2012
comment
Каким сафари пользуетесь? Он отлично работает в Safari 5. Курсор не отображается, пока на него не сфокусируется, но он наверняка имеет отступ.   -  person Charlie    schedule 21.08.2012
comment
Safari версии 5.1.7 (7534.57.2)   -  person user1418227    schedule 21.08.2012
comment
Возможно, вы захотите использовать свойство box-sizing вместе с padding-left и width.   -  person Andrew Kolesnikov    schedule 21.08.2012

Ответы (2)


arrow_upward
5
arrow_downward

Это подтвержденная ошибка WebKit, которая недавно была устранена https://bugs.webkit.org/show_bug.cgi?id=82688

Ваша версия Safari может быть слишком старой для включения этого исправления.

Вместо этого используйте padding-left.

person Andrew Kolesnikov    schedule 21.08.2012

arrow_upward
3
arrow_downward 

<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. Однако это исправление должно помочь вам со старыми версиями.

Спасибо

person Chris    schedule 15.05.2013