0

我用下面的代码创建了一个：

HTML：

<form>
   <div class="searchInputBox">
      <input type="text" tabindex="99" class="searchInput">
      <input type="submit" tabindex="100" class="searchbutton">
   </div>
</form>

CSS：

.searchInputBox {
    float: left;
    width: 270px;
}
.searchInput:focus + .searchbutton {
    visibility: visible;
}
.searchInput:focus {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 219px 6px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding: 7px 35px 7px 15px;
    width: 195px;
}
.searchInput {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 10px 6px rgba(255, 255, 255, 0.3);
    border: 1px solid #ccc;
    color: #D7D7D7;
    float: left;
    padding: 7px 15px 7px 35px;
    width: 150px;
}
.searchbutton {
    background: none repeat scroll 0 0 transparent;
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    float: left;
    height: 16px;
    left: -26px;
    margin: 6px 0;
    position: relative;
    visibility: hidden;
    width: 16px;
}

在输入文本区域获得焦点后，提交按钮在放大镜所在的区域可见。但是，单击它会导致文本输入失去焦点而不是提交表单。

有什么办法可以解决这个问题吗？最好只有 CSS ......

4

1 回答 1

0

你的按钮总是在那里，问题是当你input失去焦点时，它会向后收缩，导致你DIV向后收缩，并且连锁导致你的按钮向左移动。

更不用说背景图像也切换回来了......

从您的背景图片来看，这可能是一个单字段搜索表单，这可能适合强制用户在搜索之前输入一些内容，所以这里有一个小技巧：

小提琴：

http://jsfiddle.net/7LENQ/

CSS：

.searchInput:valid + .searchbutton {
    visibility:visible;
}
.searchInput:focus, .searchInput:valid {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 219px 6px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding: 7px 35px 7px 15px;
    width: 195px;
}

HTML：

<input type="text" tabindex="99" pattern=".+" required class="searchInput">
于 2012-09-06T09:27:50.503 回答