Sam*_*tek 7 html css forms input
我正在尝试创建一个简单的搜索栏,旁边有一个搜索图标.但我注意到我无法使用类型搜索设置输入样式.我在safari(版本9.0.3(11601.4.4))和chrome(版本49.0.2623.110)上尝试了它.起初我以为这是因为输入无效但发现可以进行类型搜索.
我唯一能够设计风格的是背景色,它只适用于镀铬.
我也尝试删除所有的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的问题？
使用appearance属性来避免专业风格,然后你可以设置它的样式:
input[type=search]{
-moz-appearance: none;/* older firefox */
-webkit-appearance: none; /* safari, chrome, edge and ie mobile */
appearance: none; /* rest */
}
更多信息:
好的,最后我发现了一个github论坛:https://github.com/h5bp/html5-boilerplate/issues/396
如果他们写了Safari中的一个错误,我应该将这段代码添加到我的样式中:
input[type="search"] {
-webkit-appearance: textfield;
}
它修好了!