Question

我正在尝试增加网页上输入字段的大小。我的宽度很好，但我的高度是我想要弄清楚的。

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

Answer 1

您可以简单地增加字体大小; input将随之扩展。

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

#searchBox input {
  font-size: 200%;
  width: 100px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>

Answer 2

有两种方法可以做到这一点。您可以使用输入中的属性高度设置高度，或通过css更改高度。

第一种方法：

<input type="text" name="search" height="200" />

第二种方法：

input[name="search"] {
    height: 200px;
}

我更喜欢使用第一个。因为它更好地扩展到它内部的文本。但是为了多次使用它，css是可行的方法。

另请注意，如果您不使用任何重置css或现代化程序，第一种方法可能无效，因为浏览器倾向于覆盖/忽略输入等元素内的height属性。

增加HTML / CSS / JS中输入字段的大小

2 个答案: