매우 간단한 HTML 5 솔루션 :
<input type="search" placeholder="Search..." />
출처 : HTML 5 튜토리얼-입력 유형 : 검색
Chrome 8, Edge 14, IE 10 및 Safari 5 이상에서 작동하며 Bootstrap 또는 기타 라이브러리가 필요하지 않습니다. (불행히도 Firefox는 아직 검색 지우기 버튼을 지원하지 않는 것 같습니다.)
검색 창에 입력하면 'x'가 표시되며 클릭하여 텍스트를 지울 수 있습니다. 이것은 Firefox와 같은 다른 브라우저에서 일반 편집 상자 ( 'x'버튼없이)로 계속 작동하므로 Firefox 사용자는 대신 텍스트를 선택하고 삭제를 누르거나 ...
Firefox에서 지원되는이 유용한 기능이 정말로 필요한 경우 여기에 게시 된 다른 솔루션 중 하나를 input [type = search] 요소에 대한 polyfill로 구현할 수 있습니다. 폴리 필은 사용자의 브라우저가 기능을 지원하지 않을 때 표준 브라우저 기능을 자동으로 추가하는 코드입니다. 시간이 지남에 따라 브라우저가 각 기능을 구현할 때 polyfill을 제거 할 수 있기를 바랍니다. 그리고 어쨌든 폴리 필 구현은 HTML 코드를 깔끔하게 유지하는 데 도움이 될 수 있습니다.
그런데 다른 HTML 5 입력 유형 (예 : "날짜", "번호", "이메일"등)도 평범한 편집 상자로 정상적으로 저하됩니다. 일부 브라우저는 멋진 날짜 선택기, 위 / 아래 버튼이있는 스피너 컨트롤 또는 (휴대폰에서) '@'기호와 '.com'버튼이 포함 된 특수 키보드를 제공 할 수 있지만 제가 아는 한 모든 브라우저는 것 이상 인식 할 수없는 입력 유형에 대한 일반 텍스트 상자를 보여줍니다.
부트 스트랩 3 및 HTML 5 솔루션
Bootstrap 3은 많은 CSS를 재설정하고 HTML 5 검색 취소 버튼을 중단합니다. Bootstrap 3 CSS가로드 된 후 다음 예제에 사용 된 CSS를 사용하여 검색 취소 버튼을 복원 할 수 있습니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
</style>
<div class="form-inline">
<input type="search" placeholder="Search..." class="form-control" />
</div>
출처 : HTML 5 검색 입력이 부트 스트랩에서 작동하지 않음
이 솔루션이 최신 버전의 Chrome, Edge 및 Internet Explorer에서 작동하는지 테스트했습니다. Safari에서 테스트 할 수 없습니다. 불행히도 검색을 지우는 'x'버튼은 Firefox에 나타나지 않지만 위와 같이 기본적으로이 기능을 지원하지 않는 브라우저 (예 : Firefox)에 대해 polyfill을 구현할 수 있습니다.