0

私は簡単です：

<input type="text" placeholder="search .." value="" id="search"/>

次のようなcsルールを追加しました。

#search{
padding:2%;
text-indent:1%;
width:30%;
}

しかし、FF / Chromeのような別のブラウザで同じ入力を試してみると、何か問題があります。たとえば、chromeでは、入力内のテキスト行の高さが異なり、入力内にフォーカスしてもプレースホルダーは残りますが、FFではすべて問題ありません。入力内にフォーカスするとプレースホルダーがフェードアウトします...すべての（ほぼすべての）ブラウザーで行の高さとテキストのインデントとプレースホルダーのフェードを修正するための適切なルールはありますか？

4

1 に答える 1

3

Chromeの機能として、プレースホルダーテキストはフォーカス時に消えず、入力時にのみ消えます。それをオーバーライドしたい場合は、JavaScriptを使用する必要があります（のアイデアをほとんど打ち負かしますplaceholder）。

線の高さは、開示した設定によって変更されません。デフォルトが異なるため、ブラウザによって異なる場合があります。

このtext-indentプロパティは、ブロックコンテナにのみ適用されます。ここでの考え方のように、左側に間隔を設定するには、を使用します。padding-leftできればemユニットを使用します。特にその幅が使用可能な幅に対して相対的に設定されている場合、間隔を要素の幅に依存させることは堅牢ではありません。

于 2012-05-11T17:57:57.210 に答える