Question

我使用以下代码创建了一个from：

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最好......

Answer 1

你的按钮总是在那里，问题是当你的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">

保持：触发表单提交前的焦点

1 个答案: