갑자기 나타난 x 버튼

검색 페이지를 만들다가 문득 Input 창을 보니 못보던 버튼이 생겨있다. 눌러보니 텍스트도 잘 지워지고 좋은데... 대체 언제 생겨난 거지? 난 추가한 적이 없는데?!

알고보니 Input type을 search로 설정하면 자동으로 생성되는 버튼이었다.

좋은데 디자인이...

문제는 기본 스타일이라 내가 작업하는 UI와 맞지 않아 수정이 필요하다는 것. 브라우저 스타일이라 먼저 초기화를 실행한 다음 수정해주어야 한다. 아래는 IE와 chrome에서의 기본 스타일을 초기화하는 코드이다.

/* IE */
input::-ms-clear,
input::-ms-reveal{
    opacity: 0;
}
/* chrome */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    opacity: 0;
}

div로 Input 전체를 감싸고 span에 이미지를 넣어줬다.

{/* 검색 */}
        {pathname === "/search" && (
          <SearchInputDiv>
            <SearchInput
              type="search"
              name="q"
              placeholder="계정 검색"
              value={searchKeyword}
              onChange={handleSearchKeywordChange}
            />
            <SearchInputSpan />
          </SearchInputDiv>
        )}

초기화 값에서 opercity를 0을 해주었지만, 완전히 사라지게 만든 건 아니다. span 이미지에 clear 버튼이 가려져서 눌리지 않는 것을 방지하기 위해 pointer-events: none을 적용한다.

const SearchInputDiv = styled.div`
  position: relative;
  width: 100%;
`;

const SearchInputSpan = styled.span`
  position: absolute;
  transform: translate(-9px, 8px);
  top: 0;
  right: 0;
  height: 23px;
  padding-right: 23px;
  pointer-events: none;
  background: url(${IconClose});
`;

수정 결과

기본 x 스타일이 사라지고 새로운 x 이미지를 적용할 수 있었다!