HTML 검색창 X표시되게 하기, 지우기 - input type의 search 옵션
페이지 정보
조회 4,000회 작성일 22-05-07 18:03
본문
검색창 X표시
input의 search 옵션
검색창에 글자를 입력하면 자동으로 X표시가 나타난다.
그런데 홈페이지를 만들다보면 검색창에 X표시가 나타나지 않을 때가 있다.
그 이유는 input type의 속성 때문이다.
검색창 X표시되게 하기, 지우기 - input type의 search 옵션
검색창에 X 지우기 표시
이제는 예전처럼 따로 X표시를 만들어서 넣을 필요가 없다. 최신 브라우저에서는 자동으로 지원하기 때문이다.
단, 평상시에는 안 보이고 글자를 입력하기 시작하면 생긴다.
만약 검색창을 만들었는데 x표시가 생기지 않는다면, input의 type을 잘못 정한 것이다.
검색창에 X표시가 생기게 하려면 input 타입을 search로 해야 한다.
아래 코드에서 볼 때, 첫 번째처럼 하면 x표시가 생기지 않고, 두 번째처럼 하면 자동으로 생긴다.
[code]
<input type="text"> : 자동으로 X표시가 생기지 않음
<input type="search"> : 자동으로 X표시가 생김
[/code]
타입에서 text는 글자를 입력 받겠다는 것이고, search는 검색어를 입력 받겠다는 것이기 때문이다.
검색창에 X 클리어 표시 지우기
위에서 X표시가 나타나게 해봤으니, 이번에는 나타나지 않게도 해 보자. CSS 파일에서 적용하면 된다.
[code]
<style type="text/css">
input.hide-clear[type=search]::-ms-clear, input.hide-clear[type=search]::-ms-reveal {
display:none;
}
</style>
[/code]
만약 크롬에서는 적용되지 않는다면 아래처럼도 적용해 볼만하다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<style type="text/css">
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
display: none;
}
</style>
[/code]