入力フィールドの画像の整列

Question

入力フィールドにはクリアテキストのアイコンがあります。あなたが入力した検索語句をクリアする

目的はGoogleに似ているinput要素内に表示[「X」]記号など

Anyhoo。 FF 4で完璧に動作します。 しかし、Chromeでは、少し離れています。 IEでは表示されません。

私はそれが私のためにz-indexといくつかの馬鹿げたコードの組み合わせだと思っています。

提案があります。 （入力エレメントの高さは36pxです）

.searchreset { 
background: url('../images/cancel-sprite.png') no-repeat 0px 0px; 
padding-left:34px; 
padding-bottom: 8px; 
margin-left: -30px; 
margin-bottom: 0px; 
width:24px;height:24px; 
line-height:36px; 
vertical-align:middle; 
margin-top:2px; 
} 
.searchreset:hover { 
background: url('../images/cancel-sprite.png') no-repeat 0px -24px; 
padding-left:34px; 
margin-left: -30px; 
margin-bottom: 0px; 
width:24px;height:24px; 
vertical-align:middle; 
cursor:pointer; 
} 

Answer 1

どのような入力方法を使用していますか？テキストの場合は、HTML5 <input type="search" />を試してください。ユーザーが入力を開始すると、Chromeはxを自動的に追加します。

IEの場合、の位置にある要素を、背景ではなくの入力に使用できます。

HTMLのみ：IE用

<div class="searchreset"> 
    <input type="search" /> 
    <span></span> 
</div> 

CSS：

.searchreset { position: relative; } 
.searchreset span { 
    background-image: url(XX); 
    display: block; 
    height: 24px; 
    position: absolute; 
    top: XXem; 
    right: XXem; 
    width: 24px; 
}