:focus-within 으로 input 늘리기

HTML

 

<div class="search_link">

  <p class="search">

    <input type="text" name="search" id="search" placeholder="검색어를 입력해 주세요.">

  </p>

  <p class="question">

    <img src="./img/pencil.svg" alt="묻기">

  </p>

  <p class="qna_view">

    <img src="./img/question.svg" alt="묻기">

  </p>

</div>

 

.search {

    width: 150px;

    margin-right: auto;

    position: relative;

    z-index: 1;

}

.search input {

    width: 150px;

    height:50px;

    border:1px solid #333;

    border-radius:30px;

    transition:all 0.8s;

}

 

.search:focus-within input {

  width: calc(100vw - 65px);

}

 

.question{

    width:50px;

    height:50px;

    margin-left:20px;

}

 

.qna_view{

    width:50px;

    height:50px;

    margin-left:20px;

}

 

-- BEFORE --

 

 

-- AFTER --

 

 

input 밖으로 마우스를 찍으면 다시 input 이 줄어든다.

 

:focus-within

에 대해서 더 알아보기 -> https://developer.mozilla.org/ko/docs/Web/CSS/:focus-within