如何重置输入的默认样式[type =＆＃34; text＆＃34;]：专注于Chrome和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中，输入类型重置似乎不是必需的，因为有一个按钮可以显示以清除输入。

铬

Safari浏览器

正如您所看到的，Chrome还为我的input[type="search"]添加了边框，并且Safari会对输入进行舍入。

我认为border: none的CSS类会照顾它，但显然只在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中测试。