HTML 如何使用CSS设置输入框（文本框）的高度

在本文中，我们将介绍如何使用CSS设置输入框（文本框）的高度。输入框（文本框）是在网页表单中常用的元素之一，通过设置其高度，可以使其更好地适应页面布局和美化。

阅读更多：HTML 教程

CSS设置输入框高度的方法

要设置输入框的高度，我们可以使用CSS的height属性。下面是两种常用的设置输入框高度的方法：

方法一：使用固定高度

可以通过设置输入框的高度为固定值来控制其高度，例如：

input[type="text"] {
  height: 40px;
}

上述代码将把所有类型为”text”的输入框的高度设置为40像素。

方法二：使用百分比

除了使用固定值，我们还可以使用百分比来设置输入框的高度，这样输入框的高度将相对于其父元素的高度进行调整。

input[type="text"] {
  height: 50%;
}

上述代码将把所有类型为”text”的输入框的高度设置为其父元素高度的50%。

示例：设置输入框的高度

下面是一个示例，演示如何设置输入框的高度。

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  height: 40px;
  width: 300px;
}
</style>
</head>
<body>

<h2>设置输入框的高度</h2>

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入您的姓名"><br><br>
  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email" placeholder="请输入您的邮箱"><br><br>
  <input type="submit" value="提交">
</form>

</body>
</html>