Блог

У нас есть значок с открытым текстом внутри поля ввода.

Цель аналогична символу Google [ ‘X’], отображаемому в элементе ввода, для очистки введенной вами поисковой фразы и т.д.

В любом случае. Работает отлично, в FF 4, но в Chrome оно немного смещено от центра. В IE это не отображается.

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

Есть предложения. ( элемент ввода имеет высоту строки 36 пикселей)

 .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;
}
  

Какой тип ввода вы используете? Если это текст, попробуйте HTML5 <input type="search" /> ; Chrome автоматически добавит крестик, когда пользователь начнет печатать.

Для 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;
}