html - 如何调整输入组件的大小？

Question

这是我要实现的 UI 原型(prototype)

这是我目前拥有的:JSFiddle以及我目前的布局

我正在尝试调整输入组件的大小，使其与 UI/搜索图标中的高度匹配。

这是输入组件的HTML代码
(我将 colspan 设置为 3，以便输入从“联系我们”到美国国旗。)

<td colspan="3"><input class="help_header" type="text" /></td>

以及为其设置样式的 CSS 代码

input {
    background-color:white;
    padding: 0px;
    height: 1px;
    vertical-align:bottom;   
}

有谁知道在这种情况下如何调整输入组件的高度？我尝试将 height 属性设置为 1px 但没有做任何事情。我还尝试将其与搜索图标的底部垂直对齐，但这也没有做任何事情。

Answer 1

来自 .help-header 的填充正在给出 <input>有点麻烦。

从 input 中删除填充通过将选择器修改为 .help_header:not(input) 来达到目的

Fiddle