首页 文章

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

提问于
浏览 次
0

我在这个codepen上创建了一个搜索功能，在Firefox上看起来很好 .

enter image description here

如您所见，状态目前为 :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

display in chrome

Safari

display in 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;
}

EDIT 1:

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

enter image description here

html css google-chrome safari

1 回答

  • 2

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

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

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

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

    回复于

相关问题