Input search clear버튼 커스텀 & IOS이슈

🙋🏻‍♀️ 인풋 클리어버튼 커스텀하려는데 어떻게하면 될까요!

input의 타입에는 text, number. tel 등 다양한 속성이 있습니다. 

그 중 Search타입에서는 인풋의 값을 reset해주는 버튼을 생성해주게 됩니다.

clear버튼은 사용자 디바이스, 브라우저등에 의해서 다른 디자인을 보여주게됩니다.

이 클리어 버튼은 브라우저 내에서 생성하기 떄문에 저 자체를 커스텀 할 수는 없고, 이 버튼을 가려주고 디자인을 변경해주는 방식으로 커스텀 해야합니다.

커스텀

JS를 사용하지 않고 CSS만을 이용해 search의 고유기능을 사용하는 방법을 이용하려합니다.

1. 현재 스타일 가리기

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal{
       opacity: 0;
      position: absolute;
      right: 0;
}
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
       opacity: 0;
      position: absolute;
      right: 0;
}

현재스타일 가릴때 JS를 이용해 커스텀할경우 display : none; 을 사용해주시고, css를 이용해 수정하실경우 opacity : 0 을 이용해서 가려주세요

2. Clear 버튼 만들어주기

<div class='box'>
	<input type='search' placeholder="검색어를 입력하세요" />
    <span> clear </span>
</div>

 

3. 버튼 스타일링

.box {
    position: relative;
    height: 30px;
    display: inline-block;
 }
  
input {
  //clear버튼 위치 만들어주기위해
  padding-right: 30px;
  height: inherit;
}

span {
  position: absolute;
  // 위치는 clear button이 생기는곳에 놔주시면 됩니다.
  top: 0;
  right: 0;
  width: 30px;
  height: inherit;
  background: url(https://img.icons8.com/pastel-glyph/2x/cancel.png) center center no-repeat;
  background-size: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  //해당 버튼이 아닌 뒤의 clear 버튼이 클릭되게하기위해 해당 엘리먼트의
  //클릭을 막아줍니다
  pointer-events: none;
}

 

이 외에 focus됐을떄만 보이게  display를 블락으로 바꿔준다던지의 기능을 원하시는 추가해주시면 되겠습니다.

 

IOS이슈

그러나, 해당기능을 아이폰 아이패드에서 확인했을때 작동하지 않는것을 확인했습니다.

그 이유는 모바일 사파리(iOS9)에서는 더 이상 작동하지 않기 때문입니다. (자동으로 보여주지 않는단 의미)

해결 방법은 

input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

위의 코드를 작성해주면 해결됩니다.