CSS：提交按鈕樣式的輸入字段

Question

我目前正在使用輸入字段來搜索我的頁面。但我正在經歷一些CSS樣式問題。我已經在輸入欄裏面放置了放大鏡圖像的提交按鈕。問題在於該按鈕不能通過跨瀏覽器保持在原位。它在Firefox中看起來不錯，但其他瀏覽器看起來很糟糕。

我怎樣才能讓提交按鈕保持輸入字段在任何時候？ EXAMPLE

謝謝！

相關CSS反對

<style> 
.search-input { 
    padding: 0 5px 0 22px; 
    border: 2px solid #DADADA; 
    height: 30px; 
    font-size: 12px; 
    line-height: 30px; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 

    background: #FFF; /* old browsers */ 

} 

.search-input li { 
list-style: none outside none; 
} 


.search-submit { 
    width: 13px; 
    height: 13px; 
    border: none; 
    background: url(http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png) no-repeat; 
    display: block; 
    position: absolute; 
    right: 170px; 
    text-indent: -9999em; 
    top: 60px; 
} 

.search{ 
    float: right; 
    margin-right: 30px; 
    margin-top: 35px; 
} 
</style> 

HTML

<div id="header"> 
<div class="search"><input type="text" class="search-input" name="search" value="Search"/><input type="submit" class="search-submit" /></div> 
</div> 

Answer 1

使用此更好的方法，我碰到。它運行良好，並通過Web開發者工具進行測試。乾杯@！！！

HTML

<div id="header"> 
    <form id="search"> 
     <input id="searchField" type="text" /> 
     <input id="searchSubmit" type="submit" value="" /> 
    </form> 
</div> 

CSS

#search{ 
    float: right; 
    margin-right: 30px; 
    margin-top: 35px; 
} 


#searchField{ 
    border: 1px solid #FFEDE8; 
    float: left; 
    height: 20px; 
    padding-right: 25px; 
    width: 140px;} 


#searchSubmit{ 
    background: url("http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png") no-repeat scroll 0 0 transparent; 
    border: medium none; 
    cursor: pointer; 
    height: 20px; 
    margin-left: -22px; 
    margin-top: 5px; 
    width: 20px; 
}