input-search 삭제버튼 커스텀

for chrome

input[type=search] {padding-right: 입력값;}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    -webkit-appearance: none;
    width: 입력값; height: 입력값; background: url(경로) center center no-repeat;
    cursor: pointer;
}

or

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 입력값; height: 입력값; background: url(경로) center center no-repeat;
    cursor: pointer;
}

point

• display: none; 이 아닌 -webkit-appearance: none; 으로 설정
• input[type=search]::-webkit-search-cancel-button {background-image: url();} 로 커스텀할 아이콘 이미지를 불러온다. width와 height값은 아이콘 크기로 설정
• input[type=search] {padding-right: 값;} 설정으로 버튼 위치 조절할 수 있음