悬停选择器在搜索栏中移动svg

Question

当我将鼠标悬停在搜索栏上时，包含在搜索栏中的svg会向下移动并向右移动，我想知道如何停止它并将其保持在原始位置？

文本和svg可以按照焦点选择器的预期工作，并且我能够将鼠标悬停选择器的文本保持静态，但是在悬停时我无法保持svg静态和位置。

HTML：

        <div class="search-container">
            <form action="/action_page.php">
            <input type="text" placeholder="Search" name="search">
            </form>
        </div>

CSS：

   .search-container input[type=text] {
     font-family: 'SF Compact Display';
     font-size: 18px;
     font-weight: normal;
     font-style: normal;
     line-height: 1.22;
     letter-spacing: normal;
     color: #999999;
     padding-left: 56px;
     padding-top: 11px;
     padding-bottom: 11px;
     box-sizing: border-box;
     background-image: url('searchIcon.svg');
     background-position: 16px 10px; 
     background-repeat: no-repeat;
 }

 .search-container input {
     width: 100%;
     height: 44px;
     border-radius: 4px;
     border: solid 0.5px #ececec;
     background-color: #f8f8f8;
     box-sizing: border-box;
 }

 .search-container input:focus {
     outline: solid 1.5px #ececec;
 }

 .search-container input[type=text]:focus {
     outline: solid 1.5px #ececec;
 }

 .search-container input:hover {
     border: solid 1.5px #ececec;
     padding-left: 55px;
 }

 .search-container input[type=text]:hover {
     border: solid 1.5px #ececec;
     padding-left: 55px;
 }