Question

我的表格如下：

<form>
  <input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City">
  <input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>

和以下CSS：

#search_bar, #search_bar_submit_button{
  height: 5em;
}

搜索栏现在为5em，但是提交按钮的高度没有改变。我已经看到建议使用<input type="submit" height = "x">的答案，但是感觉必须有一种使用CSS的方法吗？

Answer 1

input[type=submit] {
  font-size: 5em;
}

<input type="submit" value="Submit">

Answer 2

请用<input type='submit'替换<button type='submit'。

这也将允许您应用适当的CSS。请参见下面的示例。

input[type='submit'] {
 height: 5em;
}

button[type='submit'] {
 height: 5em;
}

<input type='submit' value='Search'/>


<button type='submit'>Search</button>

请通过以下链接获取更多详细信息。

input type="submit" Vs button tag are they interchangeable?。

Answer 3

这可能会帮助CSS

#search_bar_submit_button{
  max-height: 50px;
}

Answer 4

您可以尝试以下代码。

#search_bar_submit_button {
    width: 10em;
    height: 4em;
}

<form>
  <input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City"><br/><br/>
  <input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>

如何更改<input type =“ submit”>的高度

4 个答案: