CSS로 input type search X 버튼 없애기와 커스텀 스타일하기

/* 
  == 기본 검색 필드 UI 제거하기 ==
  [type="search"]에 대한 스타일을 설정합니다. 
  -webkit-appearance: textfield;는 기본 검색 입력 필드의 네이티브 UI를 제거하는 역할을 합니다.
  이를 통해 돋보기 아이콘이나 기본적인 X 버튼과 같은 브라우저 기본 스타일이 제거됩니다.
*/
[type="search"] {
    -webkit-appearance: textfield; /* 기본(네이티브) 모양을 제거 */
}

/* 
  == X 버튼과 검색 결과 버튼 숨기기 ==
  WebKit 및 Blink 엔진을 사용하는 브라우저에서 검색어를 지울 수 있는 X 버튼과 
  검색 결과 버튼을 숨깁니다. 
  이 두 선택자는 'X' 버튼과 검색 기록을 표시하는 버튼을 제어합니다.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button {
    display: none; /* X 버튼 및 검색 결과 버튼 숨기기 */
}

/* X 버튼을 없애는 방법 */
[type="search"] {
    appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button {
    display: none;
}

/* 커스텀으로 X 버튼을 스타일하는 방법 */
.searchbox-container {
    position: relative;
    display: inline-block;
}
.searchbox {
    padding-right: 1.5em;
}
.search-reset {
    position: absolute;
    width: 1em;
    height: 1em;
    border: 1px solid green;
    padding: 0;
    cursor: pointer;
    background: green;
    border-radius: 50%;
    top: 50%;
    right: .5em;
    transform: translateY(-50%) rotateZ(45deg);
    z-index: 1;
    transition: all .065s;
}
.search-reset::before,
.search-reset::after {
    content: "";
    position: absolute;
    width: 0.6em;
    height: 2px;
    background: #fff;
    top: calc(50% - 1px);
    left: calc(50% - 0.3em);  
}
.search-reset::after {
    transform: rotateZ(90deg);
}
.search-reset:disabled {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}