html - 如何重置输入的默认样式 [type ="text"] :focus in Chrome and Safari?

Question

我在这个 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 中，输入类型重置似乎不是必需的，因为有一个按钮会显示以清除输入。

Chrome

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”。

Answer 1

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

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

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

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