[css 활용] input type="search" 커스텀(x버튼 없애기)

 

퍼블리싱을 하다보면, input의 다양한 타입을 사용하게 된다.

'검색' 버튼을 커스텀 할 때 우리는

 

<input type="search" id="" name="" placeholder="" value="">

위와같이 넣게 되는데, 화면을 확인해 보면 아래 그림처럼 파란색 x버튼이 생기게 된다.

(기본 input은 너무 안이뻐서 x버튼을 제외하고 약간 커스텀을 했습니다.)

 

브라우저 기본 x버튼 노출

브라우저의 x버튼을 없애기 위해, css로 안보이게 처리를 해 주면 된다.

 

input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

 

기본 x버튼을 없애고, 커스텀 x버튼 노출

위 스타일로 default x버튼을 안보이게 처리해주고, x버튼을 커스텀해 넣어준 모습이다.