html - 调整大小后定位输入标签光标

Question

我在表单元素中有一个简单的输入标签

<form>
    <input type="text" name="" value="">
</form> 

我希望输入标签看起来很大。所以我添加这个:

input {
    height: 300px;
}

然而，困扰我的问题是输入标签的光标正好位于高度的中心。

我希望光标位于最顶部。如何定位光标？

Answer 1

输入是单行的 - 所以没有必要让它比插入符号大。

这就是为什么您可以在两个选项之间进行选择。

• 在 input 元素中使用大字体:

  <div class="input-wrapper">
    <form>
      <input type="text" name="" value="">
    </form>
  </div>
  
  <style>
    input {
      font-size: 100px;
      width: 50vw;
    }
  
    .input-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    body {
      margin: 0;
    }
  </style>
  

• 或者使用textarea:

  <div class="textarea-wrapper">
    <textarea rows="25" cols="100"></textarea>
  </div>
  
  <style>
    .textarea-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    body {
      margin: 0;
    }
  </style>