0

http://jsfiddle.net/CtaBe/

これを FF、Chrome、IE でテストしました。FF のみが意図した動作を示します (または、少なくとも意図した動作だと思います)。Chrome と IE は同じ動作を示します。最初に入力にフォーカスしたとき、カーソルはインデントしません。何かを入力して削除し、再度フォーカスすると、適切にインデントされます。

どうすればこれを修正できますか? そのくぼんだスペースに画像を表示したいからです。

4

3 に答える 3

2

簡単な免責事項: このメッセージは、人が入力フィールドでパディングではなくテキストインデントを使用する理由の確かな例を概説しています。「入力フィールドでIEハンドルのテキストインデントを修正する方法」には答えません

padding-left に関する問題は、入力フィールドの幅を変更することであり、これは望ましくない場合があります。

入力データの次の状態の背景画像アイコンを表示するシナリオを想像してください。

  • 必須フィールド
  • 無効入力
  • 必須フィールドがありませんでした
  • パスワードの強度

このようなシナリオでは、アイコンを表示するためにテキストを左の境界線から遠ざける必要があります (これは、右側に移動するよりもはるかに簡単な作業ですが、それはまったく別の議論です. パディングを使用する場合、幅さまざまな「状態」が変化する可能性があるため、これは理想的ではありません。

たとえば、別のフィールドの値に基づいてのみフィールドが必要になる場合があります。そのフィールドが必要になると、関連するクラスを介して、テキストをアイコンから遠ざけるために適用するパディングに従って、フィールドが「成長」します。特に他のフィールドが隣に浮かんでいる場合は、エレガントとは言えません。

さらに、テキストエリアの場合、一辺全体をパディングしたくはありません - 最初の行で十分です。

それがまさに text-indent の使用の出番です。また、Internet Explorer を除いて、うまく機能します。他のアイデアや解決策を探しているときに、それが私をここに導いたのです。私はいくつかのアイデアを念頭に置いていますが、思いもよらなかったもっと簡単なものがあることを願っています。

于 2012-04-24T01:08:21.793 に答える
1

Chrome では、これは既知の問題です。スターを付けてください:)

于 2011-08-30T03:24:12.497 に答える
0

'text-indent' は、ブロック レベルの要素、表のセル、およびインライン ブロックに適用されます。ブロックレベルではない要素で使用していることを願っています。

于 2014-01-29T12:57:01.213 に答える