1

我想删除 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 上看到的内容）

在此处输入图像描述

4

3 回答 3

3

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

于 2013-04-27T11:40:16.197 回答
2

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

于 2013-04-27T11:53:56.097 回答
0

我已经尝试过@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  */
}
于 2014-06-20T12:45:59.140 回答