부트 스트랩 입력란에 클리어 버튼 위치 지정

Question

입력란 안에 검색 아이콘 바로 앞에있는 클리어 버튼을 놓으려고하는데 작동하지 않습니다. 대신 "x"가 입력 필드 앞에 표시됩니다. 0과 최고 :

내가 바로와 절대 위치를 사용하여 내가 이전과 이후에 버튼을 추가 한이 시도 http://www.bootply.com/YUwdJ5Kvx6

Answer 1

약간의 업데이트를 당신이 원하는 것을 얻을 수 있습니다 : http://www.bootply.com/Lyxyupgg5F

편집 : 절대 위치가 파이어 폭스 input-group 대신 input-group-btn 이벤트에 절대적인 요소 realtive을으로 위치한다 ... 파이어 폭스에 도청 것 같다 두 번째 코드가 position: relative이라면 코드를 업데이트했습니다.

HTML을 약간 수정했는데, 나에게 좋았습니다. 그런 다음 을 input-group-btn에 추가하여 position: absolute에 대한 닫기 버튼을 작동 시키십시오. 그런 다음 입력 필드에서 버튼을 이동하려면 음수 인 right: 36px 만 입력하면됩니다. 그것은 나를 위해 쉽게했기 때문에

내가 input-group-btn 내부의 close 버튼을 넣어, 그것은 자동으로 버튼의 수직 정렬을 담당 (난 그냥 a 태그에 btn 클래스를 추가).

x 버튼 아래에 사용자가 입력하지 않도록 입력란에 padding-left: 26px !important을 추가했습니다.

편집 : 당신이 btn 클래스와 input-btn-group 내부 a 태그 (나는 당신을 조언하는)하자 경우 닫기 버튼을 클릭하면 사용자의 입력에 추한 box-shadow을 피하기 위해 CSS에 a:hover { box-shadow: none ; } 같은 것을 추가 할 수 있습니다.

Answer 2

: 4 픽셀

당신은 여기 내 예를 볼 수 있습니다. 이것이 원하는지 여부에 대한 설명. 내가 옳은지 이해 했니?

<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;"> 

    <div class="input-group double-input"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 
    <input type="text" placeholder="Second" class="form-control" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 

    </div><!-- /input-group --> 
</form>