在触发表单提交之前保持 ：focus

问：

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

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