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

【问题标题】：Increasing the size of a input field in HTML/CSS/JS在 HTML/CSS/JS 中增加输入字段的大小
【发布时间】：2015-10-20 21:53:07
【问题描述】：

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

#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 -->

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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

第一种方法：

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

第二种方法：

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

我更喜欢使用第一个。因为它更好地扩展到其中的文本。但是对于多次使用它，css 是要走的路。

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

【讨论】：