내용을 지우는 입력 위젯에서 x 위치를 지정하는 방법은 무엇입니까? 트위터와

Question

이 상당히 똑바로 검색 스타일의 입력 위젯을 만들 정방향 부트 스트랩 :

는 또한 x는 트위터 부트 스트랩으로 행할 수 있지만, 그 자리에있는 X를 배치, 일부 CSS의 미세 조정이 필요합니다.

나는 그 위치에서 x를 얻을 수 있었지만, 그다지 신뢰성이 없었다. 반응이 빠른 디자인과 다른 해상도를 사용하면 x가 완전히 옮겨집니다.

.filter-close { 
    float: none; 
    position: relative; 
    left: 5em; 
    top: 1.25em; 
    z-index: 3; 
} 

<form action="." method="get" class="form-search"> 
<a class="close filter-close" href="#">x</a>           
    <div class="input-append">     
     {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>    </div>       
</form> 

바퀴를 재발견하기 전에, 입력-와-AN-X 버튼에 입력을 돌 수 있었다 기존의 자바 스크립트 라이브러리가있다? 이런 목적으로 Chosen.js와 같은 것이 있습니까? 또는 더 나은 방법으로이 작업을 수행 할 수있는 방법에 대한 조언이 필요하십니까?

많은 감사,

Answer 1

체크 아웃 this post

This fiddle은 기본적으로 당신이 할 무엇을 찾고있는 않습니다.

올바른 방향으로 가고 있습니다.

Answer 2

일부 부트 스트랩 코드와 약간의 JavaScript를 변경하면이를 수행 할 수 있습니다. 사실 원하는 컨트롤을 텍스트 상자 안에 둘 수 있습니다. 다음은 예입니다

그리고 여기 마지막을 생성하는 데 사용되는 마크 업입니다 : http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

기본적으로 키는 다음과 같습니다 전체 코드를 체크 아웃이 게시물에 대한

<div class="composite-input"> 
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span> 
</div> 

지우기 요소에 relative 포지셔닝 및 left:-20px을 사용하십시오. 예를 들어

:

<input type="text" /><span id="userclear">x</span> 

span#userclear 
{ 
    position: relative; 
    left: -20px; 
} 

스팬이 왼쪽에 입력 겹칠이 방법. 이벤트 핸들러를 연결하여 입력 필드를 지울 수 있습니다.