title: Input's caret height
body: <p>I need help to change the caret's height - without changing the visual (hacks/tricks allowed as long as they work).<br>With that I mean I don't want to change the font's size (height and width), margins, paddings, color, background, border, etc, and if I do change it to achieve the caret's style, make it possible so I can put it back like a normal input, with it's styling capacities.</p>
  <p>My best attempt was the following code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    background-color: lightBlue;
  }
  #background{
    color: red;
    height: 61px;
    margin-top: 0px;
    text-shadow: 0 0 0 transparent;
    width: 173px;
    -webkit-text-fill-color: transparent;
    -webkit-transform: scale(1,calc(1/3));
  }
  #text{
    background-color: transparent;
    border-color: transparent;
    color: red;
    left: 8px;
    pointer-events: none;
    position: absolute;
    top: 103px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;Caret's height (pixels):&lt;/span&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input placeholder="15 (default)" spellcheck="false"&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input id="background" oninput="document.getElementById('text').value=this.value" spellcheck="false"&gt;
  &lt;input id="text" placeholder="5 (1/3)" onfocus="this.blur()" spellcheck="false" tabindex="-1"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Ignore the text's selection weirdness if you need. I'm not caring about that for now.</p>
  <p>If you have a way better solution, let me know. This is just some tests I have been doing, I don't exactly need the color to be red and the other attributes to be the way they are, but I do want it to still be possible to change them to whatherver I want.</p>
  <p>Here's how it looks to me in case people don't get the same (using Chrome):
  <a href="https://i.stack.imgur.com/vU79h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vU79h.png" alt="enter image description here" /></a></p>