WebKit under Text

Article Introduction: clever use: empty solve the WebKit core browser text-indent bug.

Yesterday in the project encountered to use indentation in an input box, you want to use Text-indent first line indent 2 text. Then found that under WebKit, when the input box content is empty, the cursor position is not indented, or at the beginning of the line, enter any character, indentation is activated.

The HTML code is as follows:

1	<input type= "text" style= "Text-indent:2em" />

View Demo

Here, whether it's an INPUT element or a textarea, or any other element that sets contenteditable= "true", this bug can be present.

IE versions, Firefox are normal, only chrome and Safari and other WebKit kernel browser only this problem.

Here baffled, but also tried a lot of methods, are ineffective.

Later and Xiao Li knife ,poor chat to this question, suddenly thought: Empty pseudo class, immediately test, can solve--although just curve simulation solution ...

1	Input[type= "text"]:EMPTY{PADDING-LEFT:2EM;}

And then submitted a bug list in the chromium community, wondering if it would be ignored.

Ps:opera here also have some minor problems, the input element indentation is normal, textarea element does not support indentation, contenteditable= "true" element and WebKit performance.

Http://www.qianduan.net/fixed-text-indent-in-webkit-editable-element-bug.html