title: Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS
body: <p>I'm messing with the CSS on an input box in CSS, to make the text bigger, adding a border, changing color, etc. </p>
  
  <p>I've aligned the bigger text to fit nicely (vertically-aligned) within my input box using padding, but the little blinking text cursor is terribly aligned (hugs the bottom). I'm wondering if there is a way to adjust the blinking text cursor on its own without messing up the positioning of the text.</p>
  
  <p>Thanks!
  Matt</p>
  
  <p>Heres the CSS:</p>
  
  <pre><code>div#search_box {
      height:32px;
      width: 366px;
      float:left;
      margin-left:86px;
      margin-top:14px;
      background-color: #ffffff;
      border: 2px solid #b66b01;
  }
  
  input#search_input {
      border:none;
      position: relative;
      float: left;
      height: 32px;
      width: 335px;
      font-size: 18px;
      padding-top: 9px;
      padding-left: 4px;
      outline-style:none;
      font-family: Helvetica, Arial, "MS Trebuchet", sans-serif;
      color: #5a5a5a;
  }
  
  div#search_icon {
      width:22px;
      height:24px;
      float:right;
      margin-right:5px;
      margin-top:4px;
      cursor: pointer;
      background: url('images/magnifier.png');
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="search_box"&gt;
       &lt;input type="text" name="query" id="search_input" autocomplete="off"/&gt;
       &lt;div id="search_icon"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/y1cr8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y1cr8.png" alt="search"></a>
  </p>