如何在 Chrome 和 Safari 中重置 input[type="text"]:focus 的默认样式？答案

【问题标题】：How to reset default styling of input[type="text"]:focus in Chrome and Safari?如何在 Chrome 和 Safari 中重置 input[type="text"]:focus 的默认样式？
【发布时间】：2014-04-14 21:22:36
【问题描述】：

我在 codepen 上创建了一个搜索功能，在 Firefox 上看起来还不错。

如您所见，当前状态为:focus，而input[type="reset"] 是通过添加背景图像生成的。

HTML

<input type="reset" value="">

CSS

.lab-search-field input[type="reset"] {
  background-color: #fff;
  background-image: url('http://bones-bruxzir.jgallardo.me/assets/img/template/sprite-global.png');
  background-repeat: no-repeat;
  border: none;
  float: right;
  height: 30px;
  width: 30px;
  line-height: 36px;
  vertical-align: middle;
}
.lab-search-field input[type="reset"] { 
  background-position: -70px -280px; }
.lab-search-field input[type="reset"]:hover { 
  background-position: -110px -280px; }

但在 Chrome 和 Safari 中，输入类型重置似乎没有必要，因为有一个按钮可以显示来清除输入。

铬

Safari

如您所见，Chrome 还为我的input[type="search"] 添加了边框，而 Safari 则完善了输入。

我认为我的 CSS 类 border: none 会处理它，但显然只在 Firefox 中。

.lab-search-field input[type="search"] {
  font-size: 23px;
  line-height: 36px;
  vertical-align:middle;
  width: 240px;
  border:none;
}

编辑 1：

我确实找到了How can I get rid of input border in chrome? 并添加了outline: none;，它消除了 Chrome 中的蓝色边框，但没有消除“X”。

【问题讨论】：

标签： html css google-chrome safari

【解决方案1】：

您可以使用以下方法摆脱 webkit 的重置按钮功能：

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

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

这肯定适用于 Chrome，但我没有机会在 Safari 中进行测试。

【讨论】：

是的，它非常适合 chrome，谢谢。但是如果我只针对<div> 中的搜索，那么做.lab-search-field input[type="search"]::-webkit-search-cancel-button { 是否合适？因为只有::-webkit-search-cancel-button { -webkit-appearance: none; } 将在整个站点中删除它。在这一点上“它有效”，但不确定这是否是它的意图。
是的，你当然可以这样嵌套你的代码。要么：.lab-search-field input[type="search"]::webkit-search-cancel-button 或 .lab-search-field ::webkit-search-cancel-button。我不确定，一个或另一个应该没问题。
好吧之前的作品，也去掉了Safari中的取消按钮。
是的，Safari 也是使用 WebKit 引擎构建的，因此基于供应商的选择器应该在这两种浏览器中都可以使用。