时间戳

首页 > 解决方案 > 高度和填充 CSS 属性不适用于搜索输入元素

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

问题描述

我在 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>

标签： htmlcssformsinput

解决方案

浏览器不会真的让你乱用input type="search"CSS-Tricks 有一个很好的概述。

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

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

推荐阅读