html - CSS目标div而不是形式

我有以下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;
}

最佳答案

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

.searchForm input {
  height: 100%;
}

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

.searchForm input {
   height: 400px;
}

关于html - CSS目标div而不是形式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27571326/