高度和填充 CSS 属性不适用于搜索输入元素 [关闭]答案

【问题标题】：Height and Padding CSS Properties Not Working On Search Input Element [closed]高度和填充 CSS 属性不适用于搜索输入元素 [关闭]
【发布时间】：2020-03-20 20:25:26
【问题描述】：

我在 Wordpress 网站上有一个简单的搜索表单，出于某种原因，在搜索输入元素上，height 和 padding CSS 属性不起作用。不知道为什么？

代码如下，或者你可以在 CodePen 上看到它：https://codepen.io/emilychews/pen/NWqBEXq

非常感谢任何帮助。这让我有点发疯了。

屏幕截图 - 搜索元素的高度应为 2rem，内边距为 2rem。

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#s{
  width: 20rem; 
  height: 2rem; /* not working */
  padding: 2rem; /* not working */
}

<div id="form-wrap">
  <form id="site-search-form">
    <div id="site-search-input-wrap">
      <input id="s" name="s" type="search" placeholder="Enter your search">
      <input class="site-search-submit" type="submit" value="SEARCH">
    </div>
  </form>
</div>

【问题讨论】：

您的代码运行良好
@TemaniAfif 搜索框是否显示应用了填充和高度？不是我看上面的代码sn-p
这是给我的，给我们看一张你看到的截图，也许可以添加更多关于你正在使用的浏览器的细节
@TemaniAfif 我已在原始问题中添加了屏幕截图
添加更多关于您的浏览器的详细信息，因为我看不到您显示的内容

标签： html css forms input

【解决方案1】：

浏览器真的不会让你乱用input type="search" CSS-Tricks 有一个漂亮的good overview。

如果样式很重要，我会找到一个组件或更改为 input type="text" 并使用 Javascript 复制其他所需的搜索功能（如建议列表或历史记录）。

很可能一个简单的文本搜索可以作为文本输入正常工作。

【讨论】：

【解决方案2】：

我找到了解决方案 - 您需要将 border CSS 属性添加到 search 输入元素，否则默认边框将保留，从而限制元素的视觉高度。例如添加border: 1px solid 可以解决问题。

【讨论】：