css以div而不是形式为目标

Question

我有以下HTML代码：

<div class="formDiv">
    <form id="searchForm">
        <input type="text" name="weathersearch" placeholder="Search places">
    </form>
</div>

使用以下css，它看起来像这样

.formDiv {
    background-color: red;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

我希望有一个更大的搜索框，而不是更大的div。但是，无论是表单ID还是div，我都会得到相同的结果，如下所示。如何使表格本身更大（即水平和垂直更大）。

#searchForm {
    width: 300px;
    height: 100px;
}

Answer 1

如果您想要相对于.searchForm或.formDiv调整输入元素的大小，请执行以下操作：

.searchForm input {
  height: 100%;
}

否则，只需直接在输入元素上设置高度：

.searchForm input {
   height: 400px;
}

Answer 2

.formDiv {
  background-color: red;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 100px;
}
#searchForm {
  height: 100%;
  width: 100%;
} 

#frmInput {
  height: 100%;
  width: 100%;
}

<div class="formDiv">
  <form id="searchForm">
    <input type="text" id="frmInput" name="weathersearch" placeholder="Search places">
  </form>
</div>