input box clear 버튼 사용하기

input box를 쓰다보면 clear 버튼을 사용해야할 경우가 있다. 

따로 만들어도 되지만, 길이 체크 및 focus 체크까지 할게 많은데, 

기본기능에 있으면 기본을 사용하는게 더 효율적이기 때문에 찾아보았다!

 

<input type="search">

 

우선 input type은 search 로 사용하면 자동으로 만들어지는데, 기본 디자인은 이쁘지 않아서 수정해야할 경우가 대다수이다! 

그래서 사용할 css는

 

input[type=search]::-webkit-search-cancel-button{
	background: #000;
}

으로 원하는 대로 변경해서 사용하면 된다.

 

*  지금은 잘 사용하지는 않지만, ie의 경우 input[type=search]

 input[type=search]::-ms-clear

로 적용하면 된다!*