title: hover selector moving svg inside search bar
body: <p>When I hover over my search bar, the SVG I have included inside the search bar moves down and to the right, I was wondering how to stop this and keep it static in its original place? </p>
  
  <p>The text and SVG works as expected for the focus selector and I was able to keep the text static for the hover selector, however I am unable to keep the SVG static and in its place when hovering.</p>
  
  <pre><code>&lt;div class="search-container"&gt;
    &lt;form action="/action_page.php"&gt;
      &lt;input type="text" placeholder="Search" name="search"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>.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;
  }
  </code></pre>