高度和填充 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可以解决问题。