input search x버튼 표시 없애기

검색할때 글자를 입력하면 input 타입이 search인 경우에 X표시가 기본적으로 나타납니다.

브라우저에서 자동으로 지원하기 때문에 다음과 같이 X표시가 자동으로 나옵니다. 

X버튼을 누르면 입력 텍스트가 다 지워져 사용할 때는 편리하지만 미관상 예쁘지 않습니다.

 

 

input에서 검색 타입에서 제공되는 clear버튼 (X버튼) 표시를 지우려면 아래 css코드를 적용하면 됩니다.

<!-- html code -->
<input type="search" value="검색어 입력" />

<!-- css code -->
<style type="text/css">
    input[type='search']::-webkit-search-decoration,
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-results-button,
    input[type='search']::-webkit-search-results-decoration {
        display:none;
        -webkit-appearance: none;
    }
</style>

 

 

 

기본으로 제공되는 x버튼을 안 보이게 처리한 후에 x버튼을 커스텀하여 예쁘게 보여주기도 합니다.