위가 유튭 메인이고 아래가 제가 만들고 있는건데요..


ㅇ보시면 검색창에 포커싱이 잡히면 왼쪽에 돋보기가 뜨는데 검색창이 고정되어있죠...


저는 저걸 어케 구현할가하다가 왼쪽부분만 따로 구현해서 display: none 하고


자바스크립트에서 검색창에 포커스가 되면 나타나도록했는데 저렇게 자꾸 검색창이 밀려나는데...


어케 고정시킬수 있나요?ㅠ 검색창 너비구하는것도 똑같은 현상이 일어나서요..


어떤식으로 구현할수있을가여?


---------------


<div class="search-container">

    <div class="test"></div>

            <form class="search-form">
                <input type="text" class="search-input" placeholder="검색">
                <input type="submit" class="search-button">
            </form>
            <div class="mic-container ic-group">
                <img class="mic-ic ic-hover" src="ic-voice-mic.svg" alt="이미지 없음">
            </div>
</div>



.search-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.test {
    visibility: visible;
    width: 20px;
    height: 42px;
    border: 1px solid rgb(218, 218, 218);
    border-right: none;
    border-radius: 20px 0 0 20px;
}

.search-form {
    display: flex;
    border-left: 0px;
}

.search-input {
    width: 500px;
    height: 42px;
    padding-left: 16px;
    font-size: 16px;
    background: url('ic-keyboard.png') no-repeat;
    background-position: calc(100% - 16px) center; /*16px만큼 패딩효과*/
    border: 1px solid rgb(218, 218, 218);
    border-left: none;
}

.search-input:focus {
    outline: none;
    border-color: rgb(51, 5, 188);
}