2

このトピックが何度か出てくるのを見てきました: 右 (または左) 隅に素敵なアイコンがあり、テキスト ボックスの一部のように見える検索ボックスを作成したいのですが、テキストは下に書き込まれません。 /その上に、次のように:

ここに画像の説明を入力(クロムから)

通常、人々が行うことは次のようなものです。

<div class="searchWrapper">
    <input type="text" />
    <div class="searchIcon"></div>
</div>

また、スタック オーバーフローには、thisやthisなどの IE での動作に関するいくつかの投稿があります。

しかし、私は別のアプローチを試みています-必要がない場合はテキストボックスをラップしたくなく、<INPUT>それ自体に適用されるスタイルとして使用します。

私はこの CSS を思いつきました: http://jsfiddle.net/motig/bvV46/4/これは Chrome と (いくつかの調整の後) IE10 で動作します:

ここに画像の説明を入力

素晴らしいですが、IE 9 もサポートする必要があります (ただし、それより低くはありません)。ただし、これは IE 9 では機能しません。

ここに画像の説明を入力

IE 9 (およびそれ以下)paddingがテキスト ボックスの設定を無視するためです。を設定しても、風変わりになり、テキストボックスの端に到達した場合にのみline-heightテキストがジャンプバックします。25px

私が考えることができる唯一の回避策は、condcomを使用して IE 8 のみのテキスト ボックスをラップすることです。しかし、それはそもそもそれを包むのと同じくらい醜いです。他の解決策はありますか？

4

0 に答える 0