title: Text is moved when focus in input(text) in chrome
body: <p>I'm building a website called <a href="http://appstore-icons.com/?lang=ar" rel="nofollow noreferrer"><strong>AppStore-Icons</strong></a> which contain a search box, the content of the search box is moved up/down <strong>on focus</strong> like this :</p>
  
  <p><img src="https://i.stack.imgur.com/YESZn.png" alt="enter image description here"></p>
  
  <p>I noticed this problem only in <strong>Chrome</strong> and only in the <strong>Arabic</strong> version of the website, I've tried to fix it by adding this CSS :</p>
  
  <pre><code>.search_box input[type="text"],
  .search_box input[type="text"]:focus {
     line-height: 15px;
     vertical-align: middle;
     font-size: 45px;
     height: 65px;
  }
  </code></pre>
  
  <p>but nothing of it worked, how could it be fixed ??</p>
  
  <p><a href="http://appstore-icons.com/?lang=ar" rel="nofollow noreferrer">Link to the Arabic version of the website</a></p>
  
  <p>Thanks in advance ..</p>