CSS : 제출 버튼 스타일이있는 입력 필드

Question

현재 내 페이지를 검색 할 입력 필드를 사용하고 있습니다. 그러나 나는 CSS 스타일링 문제를 겪고 있습니다. 입력란 안에 돋보기 이미지 인 제출 버튼을 배치했습니다. 문제는 버튼이 크로스 브라우저를 통해 그 자리에 있지 않다는 것입니다. 파이어 폭스에서는 괜찮아 보이지만 다른 브라우저에서는 나빠 보인다.

입력란에 항상 제출 버튼을 표시하려면 어떻게해야합니까? 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

를 사용하여 내가 건너 온이 더 나은 접근 방식을 반대합니다. 잘 작동하고 웹 개발자 도구로 테스트됩니다. 건배@!!!

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; 
}