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

Increasing the size of a input field in HTML/CSS/JS

本文关键字：字段 输入 HTML CSS JS 增加      更新时间：2023-09-26

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

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

你可以简单地增大字体大小;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>

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

第一个方法:

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

第二种方法:

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

我更喜欢用第一个。因为它可以更好地扩展到里面的文本。但是对于多次使用，css是最好的选择。

还要注意的是，如果你没有使用任何重置css或modernizer，第一种方法可能无法工作，因为浏览器倾向于覆盖/忽略元素(如input)中的height属性。

相关文章：