如何从chrome中删除文本框中的边框

Question

我想删除chrome为任何文本框添加的边框。这是我已经尝试过的html和css。

HTML：

<input id="searchbar" type="search" placeholder="Search" />

CSS：

input[type=search],
input[type=search]:hover,
input[type=search]:focus,
input[type=search]:active
{
    border: 0;
    outline: none;
    outline-offset: 0;
    background-color:transparent
}

请指教。 IE中没有添加边框，文本框看起来非常好。

更新：附加图像（我想要实现我在Chrome中的IE10上看到的内容）

Answer 1

添加outline:none必须解决您的问题。请提供您网站的网址

Answer 2

添加-webkit-appearance:none;将解决此问题。对于WebKit中的表单控件，这是一个有用的黑客。

Answer 3

我已经尝试了@ int32_t＆＃39; s和@ soheil的解决方案。即使Chrome和Safari使用相同的webkit引擎。 Safari及其他变种IOS，ipad＆amp; iphone表现得有点不同。

因此

-webkit-appearance:none;

适用于Chrome，但不适用于Safari

outline:none

在Safari上工作，而不是在Chrome上工作

为了更安全，你可以使用这个

.noBorderNoHeighlight{
    border: none;      /* Good browsers universal rule */
    outline: none;     /* safari and its variants  */
    outline-offset: 0; /* IE and its variants  */
    -webkit-appearance:none; /* Chrome and its variants  */
}