<input type="search"> 不是样式答案

【问题标题】：<input type="search"> not styling<input type="search"> 不是样式
【发布时间】：2016-07-18 11:07:28
【问题描述】：

我正在尝试创建一个简单的搜索栏，旁边有一个搜索图标。但我注意到我无法使用类型搜索设置输入样式。我在 safari（版本 9.0.3 (11601.4.4)）和 chrome（版本 49.0.2623.110）上进行了尝试。起初我以为是输入无效，但发现可以进行类型搜索。

我唯一能设置样式的是背景色，它只适用于 chrome。

我还尝试删除我所有的 css 样式，只为输入设置样式。它没有帮助。

我尝试谷歌搜索没有成功。

他们是不是有办法解决这个问题，还是我必须将我的输入类型放在文本上，这样我才能设置它的样式？

提前致谢！

代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        input {
            padding: 10px; /* Does not work */
        }
    </style>
</head>
<body>
    <input type="search" placeholder="Search">
</body>
</html>

此代码在 OS X 上的 Safari 和 Chrome 中不起作用

编辑：我使用的是 OS X，所以它可能是 webkit 的问题吗？

【问题讨论】：

向我们展示您的 HTML 和 CSS 代码以及您迄今为止尝试过的内容。
有一些方法可以让输入看起来像是经过了样式设置，例如 StackOverflow 顶部的搜索框。但请发布您的代码示例。
没有您的 html 和 css 无法回答。
@SamuelKodytek 没有更好的解决方案，这是正确的解决方案。但是，我在您发布的同一时刻发布了与您相同的解决方案。你比我快 10 秒！
从哪里可以找到这样的变化？以前我知道你不需要这个外观属性来覆盖预设。这是 CSS 还是浏览器样式的变化？

标签： html css forms input

【解决方案1】：

使用appearance 属性来避免专有样式，然后您就可以对其进行样式设置：

input[type=search]{
   -moz-appearance: none;/* older firefox */
   -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
   appearance: none; /* rest */
}

更多信息：

【讨论】：

【解决方案2】：

好的，最后我找到了一个github论坛：https://github.com/h5bp/html5-boilerplate/issues/396

他们是否写过这是 Safari 中的一个错误，我应该将这段代码添加到我的样式中：

input[type="search"] {
  -webkit-appearance: textfield;
}

它修复了它！

【讨论】：

你比我快10秒！哈哈
谢谢，我很感激。我赞成你的回答:)