Question

我们在输入字段中有一个明确的文字图标。

目标类似于输入元素中显示的Google ['X']符号，用于清除您键入的搜索词组等。

安美居。在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：

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

仅适用于IE的CSS：

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

输入字段中的图像对齐

1 个答案: