어떻게 부트 스트랩

Question

google search http://tech-and-teaching.com/wp-content/uploads/2012/11/firefox-search.png

가 어떻게 것과 같은 검색 창 부트 스트랩을 사용하여 (이미지의 상단)를 강조 만들려면 어떻게해야합니까 사용하여 텍스트 상자에 검색 아이콘을 추가하려면? 돋보기 아이콘을 클릭 할 수 있어야합니다.

Answer 1

당신이해야 할 일은 버튼을 만들고 양식에서 서로 옆에 입력 한 다음 CSS를 사용하여 절대적으로 버튼을 양식 위에 놓습니다.

스타일러스 버튼 (붓 스트랩에는 유용한 아이콘이 여러 개 포함되어 있습니다.)은 돋보기 모양으로되어 있습니다.

-edit-

일부 예제 코드는 관대함을 느끼고 있습니다.

<div id="form-master"> 
<form method="post"> 
    <div id="search-box"> 
     <input type="text" name="search" /> 
    </div> 

    <div id="search-button"> 
     <input type="submit" name="run" /> 
    </div> 
</form> 
</div> 

그리고 CSS : 매우 거친지만, 올바른 방향으로

#form-master { 
position: relative; 
width: 200px; 
height: 30px; 
} 

#search-box { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
width: 190px; 
height: 20px; 
padding: 5px; 
} 

#search-button { 
position: absolute; 
top: 5px; 
right: 5px; 
z-index: 5; 
border: none; 
width: 25px; 
height: 25px; 
background: url('magnifier.png') top no-repeat; 
} 

.

Answer 2

아이콘을 배경 이미지로 추가하거나 클릭 할 수있게하려는 경우 예 : google do float 입력과 텍스트 입력 왼쪽 위와 아래 부분에 border-radius 추가 입력 제출 bordr radius 오른쪽 하단에있는 부분과 최대, 같은 배경에 그들을 입력 제출에 추가 배경 img 아이콘으로 원하는대로. 그것은 같은 모양이 될 것입니다 :