如何在Chrome和Safari中重置input [type =“ text”]：focus的默认样式？

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还为我的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：

我确实找到了如何摆脱chrome中的输入边框？ 并增加了outline: none; 它摆脱了Chrome中的蓝色边框，但没有消除“ X”。

Answer 1

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

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

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

当然可以在Chrome中运行，但是我没有机会在Safari中进行测试。