高度和填充 CSS 属性不适用于搜索输入元素

Question

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

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

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

SCREENSHOT - 搜索元素的高度应为 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>

Answer 1

浏览器并不会真正让你搞乱input type="search"CSS-Tricks 有一个非常好的概述。如果样式很重要，我要么找到一个组件，要么使用 Javascript 更改input type="text"并复制其他所需的搜索功能（例如建议列表或历史记录）。简单的文本搜索很可能可以像文本输入一样工作。

Answer 2

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