input search x 버튼 삭제 및 클리어 버튼 직접 만들어 넣기

input의 타입을 search로 지정하면 브라우저 내에서 input 초기화 버튼을 넣어줍니다. 

예시 이미지

디자인을 중요시 하는 일부 프로젝트에서는 이것마저 커스텀해주기를 원합니다. 

하지만 사실상 브라우저 내에서 생성하기 때문에 저 자체를 커스텀 할 수는 없고, 이를 보이지 않게 한 뒤 추가로 디자인과 기능을 넣어주면 됩니다. 

약간은 번거로운 작업일 수 있지만 생각보다 간단합니다. 

 

우선 브라우저 내에서 생성한 초기화 버튼을 없애려면 단순히 input의 타입을 text로 지정하거나 css에서 해결해 줄 수 있습니다. 

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal{
    display:none;
}
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}

( 테스트 해보니 IE10까지만 먹습니다. )

 

그리고 div로 한번 감싸고 input옆에 버튼을 추가해 줍니다. 

버튼을 absolute로 붙인 뒤 버튼의 크기만큼 input에 padding을 줘야 input에 글씨를 많이 넣어도 가려지지 않아요.

// html
<div class="inputWrap">
    <input type="search" placeholder="검색어를 입력하세요" />
    <button class="btnClear"></button>
</div>

// css
.inputWrap {
    position: relative;
    height: 30px;
    display: inline-block;
 }
  
.inputWrap input {
  padding-right: 30px;
  height: inherit;
}

.inputWrap .btnClear {
  position: absolute;
  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;
}

그리고 input의 value를 초기화시켜줄 스크립트를 짜줍니다.

여러 가지 방식이 있겠지만 저는 부모의 자식을 찾아서 없애주는 방식으로 하겠습니다. 

이렇게 하면 형제를 찾는 것보다 이점은 구조의 순서(input과 button)가 바뀌어도 상관이 없고, 복수개를 넣어도 에러가 발생할 일이 없기 때문입니다. 

 

스크립트는 아래의 소스 둘 중 하나를 선택해서 사용하면 됩니다.

1. addEventListener 

// javascript
// 한개일때
<script>
    var btnClear = document.querySelector('.btnClear');
    btnClear.addEventListener('click', function(){
        btnClear.parentNode.querySelector('input').value = "";
    })
</script>

// javascript
// 여러개일때 
<script>
    var btnClear = document.querySelectorAll('.btnClear');
    btnClear.forEach(function(btn){
        btn.addEventListener('click', function(){
            btn.parentNode.querySelector('input').value = "";
        })
    })
</script>

2. onClick

<div class="inputWrap">
    <input type="search" placeholder="나이를 입력하세요" />
    <button class="btnClear" onClick="clearInput(this)"></button> <!-- onClick 추가 -->
</div>

<script>
    var clearInput = function(obj) {
        obj.parentNode.querySelector('input').value = ""
    }
</script>