css - 如何从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 中的表单控件，这是一个有用的 hack。

Answer 3

我已经尝试过@int32_t 和@soheil 的解决方案。即使 Chrome 和 Safari 使用相同的 webkit 引擎。Safari 及其其他变体 IOS、ipad 和 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  */
}