Question

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

我唯一能够设计风格的是背景色，它只适用于镀铬。

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

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

他们是一个解决它的方法，还是我必须将我的输入类型放在文本上，以便我可以设计它？

提前致谢！

CODE：

<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的问题吗？

Answer 1

使用appearance属性来避免专业样式化，然后您可以设置样式：

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

更多信息：

Answer 2

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

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

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

它修好了！

<input type =“search”/>没有样式

2 个答案: