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>

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

1 个答案: