保持一致，即注重形式之前提交觸發

Question

我已經從下面的代碼創建一個：

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縮回，並且鏈 - 導致您的按鈕向左移動。

且不說背景圖像也swiched回來......

你的背景圖片來看，這可能是一個字段搜索的形式，這可能是適當的強制用戶搜索之前輸入的東西，所以這裏有一個小黑客：

小提琴：

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