인스타 돋보기 검색창 구현

위스타그램 클론 코딩 중 모르는 것이 생겨서 적어보는...

인스타그램 클론코딩 중 검색창에 대한 이해가 필요했다.

평소 기본 검색창은 이렇다.

그런데 검색창을 클릭하는 순간

돋보기가 사라지고 오른쪽에 삭제 표시가 뜬다.

이걸 적용하느라 굉장히 힘들었다... 구글링을 수많이 하다가
알아낸 방법

<div class="search_form">
    <input class="search-bar_input" type="search" placeholder="검색" />
</div>

html은 이렇게 적고,

.search_form input {
    width: 215px;
    height: 20px;
    font-size: 0.8rem;
    font-weight: 300;
    text-align: center;
    color: #8e8e8e;
    padding: 3px 10px 3px 26px;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    background-color: #fafafa;
    /* search icon */
    background-image: url(../img/search.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 85px center;
    outline: none;
}

.search-bar {
    width: 220px;
    height: 27px;
    border-radius: 5px;
    border: solid 1px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 1;
}
.search-bar_input {
    width: 50px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    margin-left: 10px;
    overflow: auto;
    z-index: -1;
    font-size: 15px;
}


.search-bar_input:focus {
    outline: none;
    width: 215px;
    text-align: left;
    background-image: none;
}

이렇게 작성하였다.

그런데 돋보기가 눌렀을 때 사라지는 것을 구현하려고 하려는데 쉽지 않았다. active, hover 다 아니었다. 그러던 중 focus를 알 게 되었다.
나는 검색창에 안에 있는 돋보기를 구현하는데
.search_form input 안에 background-image를 썼다.
써본 적이 있는 css인데도 이 안에 아이콘을 넣을 생각은 못해봤던 것 같다. 그리고 나서 .search-bar_input:focus에서
background-image를 none이라고 해서 focus가 됐을 때 사라지게 만들었다. 이렇게 image를 none 으로 하는 건 처음이었다.

그런데 검색창에서 작성을 하던 중에 궁금한 점이 생겼다.
무언가를 검색하던 중에 다른 쪽으로 마우스를 클릭하면

이렇게 되는 오류를 발견했다... 그런데 어떻게 고쳐야할지 모르겠어서 멘토님께 여쭤봐야할 것 같다. css는 배우면 배울 수록 깊은 영역이라고 생각한다. 오히려 자바스크립트보다 까다로운 것 같다.

html을 제대로 정리해서 쓰기! < 중요하다1
css 제대로 적용시키기! < 중요하다2