выравнивание изображения в поле ввода

Question

У нас есть ясный текстовый значок в поле ввода.

Цель похожа на Google [ «X»] символ отображается во входном элементе, чтобы очистить поисковую фразу типизированных и т.д.

Anyhoo. Прекрасно работает, в FF 4 Но в Chrome он немного не в центре. В IE он не отображается.

Я думаю, что это комбинация z-индекса и некоторого дрянного кода от моего имени.

Любые предложения. (входной элемент имеет высоту линии 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:

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

CSS для IE только:

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