关于html：如何重置输入的默认样式[type =“text”]：专注于Chrome和Safari？


How to reset default styling of input[type=“text”]:focus in Chrome and Safari?

我在这个代码笔上创建了一个搜索功能，在Firefox上看起来很好。

enter image description here。

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

HTML

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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会对输入进行舍入。

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

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

编辑1：

我真的找到了如何在chrome中去掉输入边框？增加了outline: none;，去掉了铬蓝色边框，而不是"x"。

氧化镁

您可以使用以下方法消除WebKit的重置按钮功能：

1
2
3
4
5
6
7
input[type="search"] {
    -webkit-appearance: none;
}

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

这在Chrome上确实有效，但我还没有机会在Safari上进行测试。

相关讨论